Tải game điện thoại java hay miễn phí cho mobile

Tạo hiệu ứng trượt cho hình ảnh với css

Tạo hiệu ứng trượt cho hình ảnh với css

Traidatmui.com – Với bài viết hôm nay mình chia sẻ cùng các bạn đoạn code có thể giúp các bạn tạo hiệu ứng trượt cho hình ảnh của bạn. Với đoạn code này thì khi bạn rê chuột vào hình ảnh thì hình ảnh sẻ được trượt lên phía trên và hiển thị phần mô tả cho hình ảnh đó. Code này chỉ sử dụng CSS và HTML nên sẽ không ảnh hưởng nhiều đến tốc độ blog của bạn.

Hình ảnh minh họa
Tạo hiệu ứng trượt cho hình ảnh với css

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>
.image-box {
width:320px;height:320px;overflow:hidden;background-color:white;
border:1px solid #ccc;float:left;margin:1px 1px;
font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;
color:#333;
}
.image-container,
.image-details {height:310px;border:5px solid white;background-color:#eee;
transition:margin-top .4s ease-out .4s;
}
.image-container img {
width:310px;height:310px;padding:0 0;margin:0 0;border:none;outline:none;max-width:none;
max-height:none;
background-color:black;
}
.image-details h4,
.image-details p {
margin:0 0 .2em;padding:0 0;height:70px;
}
.image-details h4 {
font-size:120%;height:auto;
}
.image-details .details {
padding:10px 12px;overflow:hidden;
}

.image-details .more {
color:white;text-decoration:none;display:block;
text-align:center;font-weight:bold;background-color:#f9a;height:26px;line-height:26px;margin:10px 0 0;
}

.image-box:hover {border-color:#bbb; width:320px;
height:320px;}
.image-box:hover .image-container {margin-top:-160px}
.image-details .more:hover {background-color:black}
5. Save template lại và trở về phần bố cục (Layout)
6. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<div class="image-box-wrapper" id="image-box-wrapper">
<div class="image-box">
<div class="image-container">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYIMINa_ZH1Gqhdffu2eh0I4QNjElGGaFwFkvs1xxjKmFvikb3tCSkjfZTcZXVqiPyPn74yGxyZySW9Cg-Yjy6RbO9q5gCN-q1gIImepot5Hh8_TeYvflkbeNxFgeCOn3R4soL7F43610/" alt="Food">
</div>
<div class="image-details">
<div class="details">
<h4>Tiêu đề</h4>
<p>Ở đây sẽ là nội dung mô tả cho hình ảnh của bạn</p>
<p>
<a class="more" href="# ">Đọc tiếp...</a></p>
</div>
</div>
</div>
<div style="clear:both;"></div>

</div>

Bạn thay link https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYIMINa_ZH1Gqhdffu2eh0I4QNjElGGaFwFkvs1xxjKmFvikb3tCSkjfZTcZXVqiPyPn74yGxyZySW9Cg-Yjy6RbO9q5gCN-q1gIImepot5Hh8_TeYvflkbeNxFgeCOn3R4soL7F43610/ thành link ảnh của bạn và tiêu đề nội dung của bạn.

7. Cuối cùng là save tiện ích lại.

Chúc bạn thành công!
Tham khảo bloggertrix.com

Game Cùng Chuyên Mục

  • Chèn thêm dòng chữ vào tiêu đề hộp Share của AddThis
  • Thủ thuật: Ẩn link spam trong comment với JQuery cho Blogger
  • Tạo bông tuyết rơi trên web/blog nhân dịp lễ Giáng sinh (Noel)
  • [Thủ thuật] - Trình bày công thức toán học trong Blogspot với MathJax
  • Thanh menu ngang với hiệu ứng bắt mắt bằng CSS3 cho Blogspot
  • Không có nhận xét nào

    Copyright © 2012 OiB Share V4 all rights reserved.


    Oivl blog