Hiệu ứng Hover Icon đơn giản bằng CSS và Javascript

Cũng lâu rồi mình mới viết bài hướng dẫn thủ thuật tạo web. Hôm nay, rảnh rỗi lang thang trên mạng, tìm được cái này khá hay và đơn giản nên mình quyết định giới thiệu lại cho các bạn cùng sử dụng. Mình tạm gọi nó là Hiệu ứng Hover Icon, không biết chính xác thì gọi là gì, nghĩa là khi di chuột vào ảnh thì sẽ có icon hiện lên trên bức ảnh đó.

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

Bước 1: Đầu tiên, các bạn hãy tạo một khung HTML với nội dung như sau:

<figure class="snip1205">
 <img src="http://hinhanhdep.pro/content/uploads/2014/12/hinh-anh-dep-ve-tinh-yeu-buon-667-1.jpg" alt="sample2"/>
 <i class="ion-chatboxes"></i>
 <a href="#"></a>
 </figure>
 <figure class="snip1205 blue">
 <img src="http://www.wn.com.vn/product_images/m/947/anh-buon-tinh-yeu(19)__76451_std.jpg" alt="sample4"/>
 <i class="ion-checkmark"></i>
 <a href="#"></a>
 </figure>
 <figure class="snip1205 green">
 <img src="http://img.khoahoc.tv/photos/image/032013/21/fractal.jpg" alt="sample3"/>
 <i class="ion-search"></i>
 <a href="#"></a>
 </figure>

Bước 2: Chúng ta sẽ viết thêm một chút CSS để cho nó được đẹp hơn. Đây là nội dung CSS của mình làm mẫu:

/* Included color classes.. 
 .red 
 .blue 
 .yellow
 .green
 .orange
 .navy 
*/
/* Icon set - http://ionicons.com */
@import url(http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
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;
}
figure.snip1205 i {
 position: absolute;
 top: 50%;
 left: 50%;
 border-radius: 50%;
 font-size: 34px;
 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);
}
/* Demo purposes only */
body {
 background-color: #212121;
}

Bước 3: Để hoàn thiện được tính năng này, chúng ta sẽ cần thêm một đoạn javascript ngắn nữa như sau:

/* Demo purposes only */
 $(".hover").mouseleave(
 function () {
 $(this).removeClass("hover");
 }
 );

OK, chỉ đơn giản như vậy thôi, các bạn cùng làm và thưởng thức nhé!

Chú ý: Nội dung trong các bài viết chỉ có tính chất tham khảo. Độc giả vui lòng tham khảo ý kiến của bác sĩ trước bất cứ áp dụng nào! Vui lòng liên hệ để gỡ bài nếu bạn thấy sai và không đúng! Blog xin chân thành cảm ơn!