[Shortcode] 20 hiệu ứng hover cho hình ảnh và text

[Shortcode]!
Với CSS3 nếu biết cách sử dụng bạn sẽ có thể tạo ra rất nhiều hiệu ứng trông mượt và đẹp rất nhiều. Bài viết này xin chia sẻ với các bạn một số hiệu ứng rất đẹp mắt khi sử dụng HOVER cho hình ảnh hay text với CSS3, bạn có thể tham khảo và sử dụng.

01: Image size

 
.container img:hover {
-webkit-transform:scale(1.2); transform:scale(1.2);
}
.container img {
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}

02: Zoom in img

 
.container:hover img {
-webkit-transform:scale(1.3); transform:scale(1.3);
}
.container {
overflow:hidden;
}
.container img {
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}

03: Zoom out img

 
.container:hover img {
-webkit-transform:scale(1); transform:scale(1);
}
.container {
overflow:hidden;
}
.container img {
-webkit-transform:scale(1.3); transform:scale(1.3); -webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}

04: Border radius and shadow effect

 
.container img:hover {
border-radius:50%; box-shadow: 0 10px 6px -6px grey;
}
.container img {
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}

05: Border radius distortion

 
.container img:hover {
border-top-left-radius: 120px; border-bottom-right-radius: 120px; border-top-right-radius: 15px; border-bottom-left-radius: 15px;
}
.container img {
border-bottom-left-radius: 120px; border-top-right-radius: 120px; border-bottom-right-radius: 15px; border-top-left-radius: 15px; -webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}

06: Glowing border

 
.container img:hover {
-webkit-box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75); box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75);
}
.container img {
-webkit-box-shadow: 0px 0px 15px 5px rgba(0, 185, 233, .75); box-shadow: 0px 0px 15px 5px rgba(0, 185, 233, .75); -webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}

07: Glowing border

 
.container:hover img{
-webkit-transform: rotateY(180deg); -webkit-transform-style: preserve-3d; transform: rotateY(180deg); transform-style: preserve-3d;
} .container img, .container11:hover img {
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}
/* Note: You could, of course, target the image class directly with "image:hover". However, using the hover on the parent container is preferred here, because it results in a smoother flip animation in all modern browsers. Make sure the container has the same width and height as the image. */

08: Vertical card flip

.container .carddiv {
width:200px; height:150px; position:relative; -webkit-transform-style: preserve-3d; -webkit-transform-origin: 100% 75px; -webkit-transition: all 0.7s ease; transform-style: preserve-3d; transform-origin: 100% 75px; transition: all 0.7s ease;
} .container:hover .carddiv {
-webkit-transform: rotateX(-180deg); transform: rotateX(-180deg);
} .container .frontofcard, .container12 .backofcard {
width:200px; height:150px; position:absolute; left:0; -webkit-backface-visibility:hidden; backface-visibility:hidden;
} .container .backofcard {
padding-top:50px; -webkit-transform: rotateX(180deg); transform: rotateX(180deg);
}
HTML
<div class="container"><div class="carddiv">
<img class="frontofcard" style="Border:5px solid #482a02;" src="#" alt="img"> <p class="backofcard">Text</p></div></div>

09: 3D text

 
.text:hover {
text-shadow: 0 1px 0 #666, 0 2px 0 #555, 1px 3px 0 #444, 2px 4px 0 #333, 3px 5px 0 #222, 4px 6px 1px #111, 0 0 5px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.5), 1px 3px 5px rgba(0,0,0,.4), 3px 5px 10px rgba(0,0,0,.3), 5px 10px 10px rgba(0,0,0,.2), 10px 20px 20px rgba(0,0,0,.1);
}
.text {
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}

10: Glowing text

 
.text:hover {
text-shadow: 0px 0 15px #fff;
}
.text {
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}

11: Image with text overlay – fade effect

.container {
position:relative;
}
.container .textbox:hover {
opacity:1;
}
.container .text {
padding-top: 50px;
}
.container .textbox {
width:200px; height:150px; position:absolute; top:0; left:0; opacity:0; border-radius:5px; background-color: rgba(0,0,0,0.75); -webkit-box-shadow: 0px 0px 15px 2px rgba(255,255,255,.75); box-shadow: 0px 0px 15px 2px rgba(255,255,255,.75); -webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}
HTML
<div class="container">
<img src="" alt=""/> <div class="textbox">
<p class="text">TEXT</p>
</div>
</div>

12: Image and text slide hover effect

.container {
position:relative; overflow:hidden;
}
.container .textbox {
width:364px; height:74px; position:absolute; top:0; left:0; margin-top:-160px; border-radius:5px; background-color: rgba(0,0,0,0.75); -webkit-box-shadow: inset 0px 0px 5px 2px rgba(255,255,255,.75); box-shadow: inset 0px 0px 5px 2px rgba(255,255,255,.75);
}
.container:hover .textbox {
margin-top:0;
}
.container .text {
padding: 10px;
}
.container .textbox {
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}

HTML
<div class="container">
<img src="" alt=""/> <div class="textbox">
<p class="text">TEXT</p>
</div>
</div>

13: Image and text slide hover effect

.container {
position:relative; overflow:hidden; width:200px; height:150px;
}
.container .textbox {
position:absolute; top:0; left:0; width:200px; height:150px; margin-left:-210px;
}
.container:hover .textbox {
margin-left:0;
}
.container img {
margin-left:0;
}
.container:hover img {
margin-left:210px;
}
.container .text {
padding-top: 50px;
}
.container img, .container .textbox {
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}
HTML
<div class="container">
<img src="" alt=""/> <div class="textbox">
<p class="text">TEXT</p>
</div>
</div>
/* Note: In order to slide to the left, change the following values: .container .textbox {margin-left:210px;}, .container:hover img {margin-left:-210px;} */