Hiệu ứng hover khi rê chuột qua ảnh

Thứ Tư, 15 tháng 6, 2016

Hiệu ứng hover khi rê chuột qua ảnh

Có rất nhiều hiệu ứng hover khi rê chuột vào ảnh. Bài viết dưới đây sẽ hướng dẫn bạn thực hiện 10 kiểu hiệu ứng hover độc đáo, có thể tùy chỉnh áp dụng vào bài viết trên blog của bạn.

- Html Code :

<div class="container"> <div class="main"> <div class="view view-first"> <img src="1.jpg" /> <div class="mask"> <h2>Hover Style #1</h2>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.

                                                
                                            Hover Style #1A wonderful serenity has taken possession of my 
      entire soul, like these sweet mornings of spring which I 
      enjoy with my whole heart.
                        Read More
                    
                    
                                            Hover Style #1A wonderful serenity has taken possession of my 
      entire soul, like these sweet mornings of spring which I 
      enjoy with my whole heart.
                        Read More
                    
                    
                                            Hover Style #1A wonderful serenity has taken possession of my 
      entire soul, like these sweet mornings of spring which I 
      enjoy with my whole heart.
                        Read More
                    
                    
                                            Hover Style #1A wonderful serenity has taken possession of my 
      entire soul, like these sweet mornings of spring which I 
      enjoy with my whole heart.
                        Read More

Cần chỉnh lại đường link các ảnh 1.jpg, ..., 4.jpg cho đúng với link ảnh của bạn

Live Demo: Hover effects

Thêm vào đường link tới các file css như sau:

Đường dẫn tới file demo.css, style_common.css, style1.css trong code trên sẽ phải chỉnh lại cho đúng link của bạn. Nội dung các file css này xem bên dưới.

demo.css

style_common

- Nội dung các file style1.css, style2.css, ..., style10.css: