20 hiệu ứng hover tuyệt đẹp cho hình ảnh và văn bản bằng CSS3

Điểm 4.6/5 dựa vào 87 đánh giá

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.
20 hiệu ứng hover tuyệt đẹp cho hình ảnh và văn bản bằng CSS3
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
.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
.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: Border radius distortion II
.container img:hover {
border-top-left-radius: 30px 120px; border-bottom-right-radius: 30px 120px; border-bottom-left-radius: 15px; border-top-right-radius: 15px;
}
.container img {
border-top-left-radius: 15px; border-top-right-radius: 120px 30px; border-bottom-left-radius: 120px 30px; border-bottom-right-radius: 15px; -webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}


07: 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;
}


08: Rotation (2D)
.container img:hover {
-webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.container img {
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}


09: Skew
.container img:hover {
-webkit-transform: skew(0deg,20deg); transform: skew(0deg,20deg);
}
.container img {
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}


10: Translate and opacity
.container img:hover {
-webkit-transform: translate(20px,-50px); transform: translate(20px,-50px); opacity: 0.4;
}
.container img {
opacity: 1; -webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}


11: Flip
.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. */


12: 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>

CÔNG NGHỆ THỦ THUẬT

13: Transformation
.container img:hover {
-webkit-box-shadow: 0px 0px 15px 15px #fff; box-shadow: 0px 0px 15px 15px #fff; border-radius:50%; opacity: 0.6; -webkit-transform: rotate(720deg); transform: rotate(720deg);
}
.container img {
opacity: 1; -webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}


14: 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;
}

CÔNG NGHỆ THỦ THUẬT

15: Blur
.text:hover {
color: rgba(0,0,0,0); text-shadow: 0 0 20px #FBFE8B;
}
.text {
color: #FBFE8B; -webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}
/* Note: If you use this in a production environment, keep in mind that the text will vanish in most IE versions, including IE 11. Workaround: To achieve a blur effect, you can try:

a blurry fallback image + easing.
adding "filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=5);" for older IE versions (no support in IE 10 and up, wouldn't bother).
make yourself familiar using SVG (Scalable Vector Graphics) filter effects.

Note II: There is also a blur filter for this very effect. However, at the time of writing this (december 2013), the solution above is better for overall crossbrowser support than using the blur filter. This may change in the future. */

CÔNG NGHỆ THỦ THUẬT

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

CÔNG NGHỆ THỦ THUẬT

17: 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>


CÔNG NGHỆ THỦ THUẬT

18: Image with text overlay – scale effect
.container {
position:relative;
}
.container .textbox {
width:200px; height:150px; position:absolute; top:0; left:0; -webkit-transform: scale(0); transform: scale(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);
}
.container:hover .textbox {
-webkit-transform: scale(1); transform: scale(1);
}
.container .text {
padding-top: 50px;
}
.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>


CÔNG NGHỆ THỦ THUẬT

19: Image with text overlay – text slide 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>


CÔNG NGHỆ THỦ THUẬT

20: 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;} */


CÔNG NGHỆ THỦ THUẬT


Chúc bạn thành công!

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