Like Page để cập nhật tin mới ngay trên facebook nhé

Chia sẻ hiệu ứng Hover hình ảnh bằng CSS3 đẹp cho blogspot

Chào các bạn trong bài viết về thủ thuật blogspot này mình sẽ chia sẻ tới các bạn một hiệu ứng Hover cho ảnh rất đẹp mình sưu tầm được.
Chia sẻ hiệu ứng Hover hình ảnh bằng CSS3 đẹp cho blogspot

Các bước thực hiện

Bước 1: Đăng nhập Blogger -> Mẫu -> Chỉnh sửa HTML và dán đoạn CSS lên phía trên thẻ ]]></b:skin
figure.snip1205 {
 position: relative;
 float: left;
 overflow: hidden;
 margin: 10px 1%;
 min-width: 220px;
 max-width: 310px;
 width: 100%;
 background: #000000;
 text-align: center;
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
figure.snip1205 * {
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-transition: all 0.35s ease-in-out;
 transition: all 0.35s ease-in-out;
}
figure.snip1205 img {
 max-width: 100%;
 vertical-align: top;
height: 220px;
}
figure.snip1205 i {
 position: absolute;
 top: 50%;
 left: 50%;
 border-radius: 50%;
 font-size: 40px;
 color: #000000;
 width: 60px;
 height: 60px;
 line-height: 60px;
 background: #ffffff;
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
 -webkit-transform: translate(-50%, -50%) scale(0);
 transform: translate(-50%, -50%) scale(0);
 transition: all 300ms 0ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
figure.snip1205 a {
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 position: absolute;
}
figure.snip1205.blue {
 background-color: #2472a4;
}
figure.snip1205.blue i {
 color: #20638f;
}
figure.snip1205.red {
 background-color: #ab3326;
}
figure.snip1205.red i {
 color: #962d22;
}
figure.snip1205.yellow {
 background-color: #e08e0b;
}
figure.snip1205.yellow i {
 color: #c87f0a;
}
figure.snip1205.green {
 background-color: #229955;
}
figure.snip1205.green i {
 color: #1e8449;
}
figure.snip1205.orange {
 background-color: #d67118;
}
figure.snip1205.orange i {
 color: #bf6516;
}
figure.snip1205.navy {
 background-color: #2b3c4e;
}
figure.snip1205.navy i {
 color: #222f3d;
}
figure.snip1205:hover img,
figure.snip1205.hover img {
 opacity: 0.3;
 -webkit-filter: grayscale(100%);
 filter: grayscale(100%);
}
figure.snip1205:hover i,
figure.snip1205.hover i {
 -webkit-transform: translate(-50%, -50%) scale(1);
 transform: translate(-50%, -50%) scale(1);
 transition: all 300ms 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
Bước 2: Bạn tiếp tục dán đoạn JS sau lên phía trên thẻ đóng </body>
<script type='text/javascript'>
//<![CDATA[
 $(".hover").mouseleave(
 function () {
 $(this).removeClass("hover");
 }
 );
//]]>
</script>
Bước 3: Bạn dán đoạn HTML cần hiển thị này vào chỗ muốn hiển thị, có thể bên sidebar,...
<figure class="snip1205">
 <img src="http://i.imgur.com/dvS447x.jpg" alt="sample2"/>
 <i class="fa fa-picture-o"></i>
 <a href="#"></a>
 </figure>
 <figure class="snip1205 blue">
 <img src="http://i.imgur.com/ihFFID9.jpg" alt="sample4"/>
 <i class="fa fa-check-circle"></i>
 <a href="#"></a>
 </figure>
 <figure class="snip1205 green">
 <img src="http://i.imgur.com/ARdzTaN.jpg" alt="sample3"/>
 <i class="fa fa-star"></i>
 <a href="#"></a>
 </figure>

Chỉnh sửa

Bạn có thể thêm nhiều hơn 3 ảnh
- Thay màu đỏ bằng Link ảnh
- Thay màu cam bằng các Icon khắc bằng cách tham khảo nhiều Icon tại trang Font Awesome.
Chúc bạn thành công!

Không có nhận xét nào

- Bình luận của bạn sẽ được kiểm duyệt trước khi xuất bản

- Những bình luận mang tính xây dựng đóng góp bài viết mới được duyệt

- Vui lòng KHÔNG bình luận thô tục, không dấu, chèn các liên kết bên ngoài, bình luận không liên quan hoặc quá ngắn

- Hãy là con người văn minh từ những câu nói