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.

view plaincopy to clipboardprint?

1. <div class="container">            <div class="main">                <div class="view view-first">                    <img src="images/1.jpg">  
2.                     <div class="mask">                        <h2>Hover Style #1</h2>A wonderful serenity has taken possession of my   
3.       entire soul, like these sweet mornings of spring which I   
4.       enjoy with my whole heart.  
5.                         <a class="info" href="https://www.blogger.com/blogger.g?blogID=7753262719787608453#">Read More</a>  
6.                     </div></div><div class="view view-first">                    <img src="images/2.jpg">  
7.                     <div class="mask">                        <h2>Hover Style #1</h2>A wonderful serenity has taken possession of my   
8.       entire soul, like these sweet mornings of spring which I   
9.       enjoy with my whole heart.  
10.                         <a class="info" href="https://www.blogger.com/blogger.g?blogID=7753262719787608453#">Read More</a>  
11.                     </div></div><div class="view view-first">                    <img src="images/3.jpg">  
12.                     <div class="mask">                        <h2>Hover Style #1</h2>A wonderful serenity has taken possession of my   
13.       entire soul, like these sweet mornings of spring which I   
14.       enjoy with my whole heart.  
15.                         <a class="info" href="https://www.blogger.com/blogger.g?blogID=7753262719787608453#">Read More</a>  
16.                     </div></div><div class="view view-first">                    <img src="images/4.jpg">  
17.                     <div class="mask">                        <h2>Hover Style #1</h2>A wonderful serenity has taken possession of my   
18.       entire soul, like these sweet mornings of spring which I   
19.       enjoy with my whole heart.  
20.                         <a class="info" href="https://www.blogger.com/blogger.g?blogID=7753262719787608453#">Read More</a>  
21.                     </div></div></div></div>  

            
                
                    
                    
                        
Hover Style #1
A 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 #1
A 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 #1
A 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 #1
A 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:

view plaincopy to clipboardprint?

1. <link rel="stylesheet" type="text/css" href="demo.css">  
2.         <link rel="stylesheet" type="text/css" href="style_common.css">  
3.         <link rel="stylesheet" type="text/css" href="style1.css">  

Đườ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:

Style 1

Style 2

Style 3

Style 4

Style 5

Style 6

Style 7

Style 8

Style 9

Style 10

Hãy like Twitter, Facebook hay Google để hiện nội dung ẩn !

Tweet