Trang Chủ Thiết kế website CSS

15 Hiệu ứng hover hình ảnh sử dụng CSS

A+A-
PrintEmail

Bài viết này tiếp tục chia sẻ đến các bạn 15 hiệu ứng khi trỏ chuột (hover) vào hình ảnh chỉ sử dụng Css nhưng rất đẹp và sinh động cho website của bạn.
CSS dùng chung cho các ví dụ tại bài viết này 
Các ví dụ cho bài viết này đều được sử dụng chung Css dưới đây, nên đây cũng là đoạn CSS mà các bạn cần thêm vào nhé 

figure {
 overflow: hidden;
}

Hiệu ứng Hover Zoom In #1


Code HTML như sau: 

<div class="hover01">
<figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfn6A29P8DFZFVPhtv5tyAIouThSV-Wfk19qlXpydaNVFt-8puWwJnfWd7PwgQDcU-fhLDbFhiYz8Ol_GUIF1x4wbTOcFeZ9BTNMmbEuZQxSgbS3C49Qbrw4DfjQo5bnNtB-1BeQ_b0vD/s1600/anh-dep-gai-xinh.jpg" /></figure>
</div>

CSS cho hiệu ứng hover zoom in #1 này

/* Zoom In #1 */
.hover01 figure img {
 -webkit-transform: scale(1);
 transform: scale(1);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover01 figure:hover img {
 -webkit-transform: scale(1.3);
 transform: scale(1.3);
}

Hiệu ứng Hover Zoom In #2


Code HTML như sau: 

<div class="hover02">
<figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfn6A29P8DFZFVPhtv5tyAIouThSV-Wfk19qlXpydaNVFt-8puWwJnfWd7PwgQDcU-fhLDbFhiYz8Ol_GUIF1x4wbTOcFeZ9BTNMmbEuZQxSgbS3C49Qbrw4DfjQo5bnNtB-1BeQ_b0vD/s1600/anh-dep-gai-xinh.jpg" /></figure>
</div>

CSS cho hiệu ứng hover zoom in #2 này

/* Zoom In #2 */
.hover02 figure img {
 width: 300px;
 height: auto;
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover02 figure:hover img {
 width: 350px;
}

Hiệu ứng Hover Zoom Out #1


Code HTML như sau: 

<div class="hover03">
<figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfn6A29P8DFZFVPhtv5tyAIouThSV-Wfk19qlXpydaNVFt-8puWwJnfWd7PwgQDcU-fhLDbFhiYz8Ol_GUIF1x4wbTOcFeZ9BTNMmbEuZQxSgbS3C49Qbrw4DfjQo5bnNtB-1BeQ_b0vD/s1600/anh-dep-gai-xinh.jpg" /></figure>
</div>

CSS cho hiệu ứng hover này

/* Zoom Out #1 */
.hover03 figure img {
 -webkit-transform: scale(1.5);
 transform: scale(1.5);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover03 figure:hover img {
 -webkit-transform: scale(1);
 transform: scale(1);
}

Hiệu ứng Hover Zoom Out #2


Code HTML như sau: 

<div class="hover04">
<figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfn6A29P8DFZFVPhtv5tyAIouThSV-Wfk19qlXpydaNVFt-8puWwJnfWd7PwgQDcU-fhLDbFhiYz8Ol_GUIF1x4wbTOcFeZ9BTNMmbEuZQxSgbS3C49Qbrw4DfjQo5bnNtB-1BeQ_b0vD/s1600/anh-dep-gai-xinh.jpg" /></figure>
</div>

CSS cho hiệu ứng hover này

/* Zoom Out #2 */
.hover04 figure img {
 width: 400px;
 height: auto;
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover04 figure:hover img {
 width: 300px;
}

Hiệu ứng Hover Slide


Code HTML như sau: 

<div class="hover05">
<figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfn6A29P8DFZFVPhtv5tyAIouThSV-Wfk19qlXpydaNVFt-8puWwJnfWd7PwgQDcU-fhLDbFhiYz8Ol_GUIF1x4wbTOcFeZ9BTNMmbEuZQxSgbS3C49Qbrw4DfjQo5bnNtB-1BeQ_b0vD/s1600/anh-dep-gai-xinh.jpg" /></figure>
</div>

CSS cho hiệu ứng hover này

/* Slide */
.hover05 figure img {
 margin-left: 30px;
 -webkit-transform: scale(1.5);
 transform: scale(1.5);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover05 figure:hover img {
 margin-left: 0;
}

Hiệu ứng Hover Rotate


Code HTML như sau: 

<div class="hover06">
<figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfn6A29P8DFZFVPhtv5tyAIouThSV-Wfk19qlXpydaNVFt-8puWwJnfWd7PwgQDcU-fhLDbFhiYz8Ol_GUIF1x4wbTOcFeZ9BTNMmbEuZQxSgbS3C49Qbrw4DfjQo5bnNtB-1BeQ_b0vD/s1600/anh-dep-gai-xinh.jpg" /></figure>
</div>

CSS cho hiệu ứng hover này

/* Rotate */
.hover06 figure img {
 -webkit-transform: rotate(15deg) scale(1.4);
 transform: rotate(15deg) scale(1.4);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover06 figure:hover img {
 -webkit-transform: rotate(0) scale(1);
 transform: rotate(0) scale(1);
}

Hiệu ứng Hover Blur


Code HTML như sau: 

<div class="hover07">
<figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfn6A29P8DFZFVPhtv5tyAIouThSV-Wfk19qlXpydaNVFt-8puWwJnfWd7PwgQDcU-fhLDbFhiYz8Ol_GUIF1x4wbTOcFeZ9BTNMmbEuZQxSgbS3C49Qbrw4DfjQo5bnNtB-1BeQ_b0vD/s1600/anh-dep-gai-xinh.jpg" /></figure>
</div>

CSS cho hiệu ứng hover này

/* Blur */
.hover07 figure img {
 -webkit-filter: blur(3px);
 filter: blur(3px);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover07 figure:hover img {
 -webkit-filter: blur(0);
 filter: blur(0);
}

Hiệu ứng Hover Gray Scale


Code HTML như sau: 

<div class="hover08">
<figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfn6A29P8DFZFVPhtv5tyAIouThSV-Wfk19qlXpydaNVFt-8puWwJnfWd7PwgQDcU-fhLDbFhiYz8Ol_GUIF1x4wbTOcFeZ9BTNMmbEuZQxSgbS3C49Qbrw4DfjQo5bnNtB-1BeQ_b0vD/s1600/anh-dep-gai-xinh.jpg" /></figure>
</div>

CSS cho hiệu ứng hover này

/* Gray Scale */
.hover08 figure img {
 -webkit-filter: grayscale(100%);
 filter: grayscale(100%);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover08 figure:hover img {
 -webkit-filter: grayscale(0);
 filter: grayscale(0);
}

Hiệu ứng Hover Sepia


Code HTML như sau: 

<div class="hover09">
<figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfn6A29P8DFZFVPhtv5tyAIouThSV-Wfk19qlXpydaNVFt-8puWwJnfWd7PwgQDcU-fhLDbFhiYz8Ol_GUIF1x4wbTOcFeZ9BTNMmbEuZQxSgbS3C49Qbrw4DfjQo5bnNtB-1BeQ_b0vD/s1600/anh-dep-gai-xinh.jpg" /></figure>
</div>

CSS cho hiệu ứng hover này

/* Sepia */
.hover09 figure img {
 -webkit-filter: sepia(100%);
 filter: sepia(100%);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover09 figure:hover img {
 -webkit-filter: sepia(0);
 filter: sepia(0);
}

Hiệu ứng Hover Blur + Gray Scale


Code HTML như sau: 

<div class="hover10">
<figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfn6A29P8DFZFVPhtv5tyAIouThSV-Wfk19qlXpydaNVFt-8puWwJnfWd7PwgQDcU-fhLDbFhiYz8Ol_GUIF1x4wbTOcFeZ9BTNMmbEuZQxSgbS3C49Qbrw4DfjQo5bnNtB-1BeQ_b0vD/s1600/anh-dep-gai-xinh.jpg" /></figure>
</div>

CSS cho hiệu ứng hover này

/* Blur + Gray Scale */
.hover10 figure img {
 -webkit-filter: grayscale(0) blur(0);
 filter: grayscale(0) blur(0);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover10 figure:hover img {
 -webkit-filter: grayscale(100%) blur(3px);
 filter: grayscale(100%) blur(3px);
}

Hiệu ứng Hover Opacity #1


Code HTML như sau: 

<div class="hover11">
<figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfn6A29P8DFZFVPhtv5tyAIouThSV-Wfk19qlXpydaNVFt-8puWwJnfWd7PwgQDcU-fhLDbFhiYz8Ol_GUIF1x4wbTOcFeZ9BTNMmbEuZQxSgbS3C49Qbrw4DfjQo5bnNtB-1BeQ_b0vD/s1600/anh-dep-gai-xinh.jpg" /></figure>
</div>

CSS cho hiệu ứng hover này

/* Opacity #1 */
.hover11 figure img {
 opacity: 1;
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover11 figure:hover img {
 opacity: .5;
}

Hiệu ứng Hover Opacity #1


Code HTML như sau: 

<div class="hover12">
<figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfn6A29P8DFZFVPhtv5tyAIouThSV-Wfk19qlXpydaNVFt-8puWwJnfWd7PwgQDcU-fhLDbFhiYz8Ol_GUIF1x4wbTOcFeZ9BTNMmbEuZQxSgbS3C49Qbrw4DfjQo5bnNtB-1BeQ_b0vD/s1600/anh-dep-gai-xinh.jpg" /></figure>
</div>

CSS cho hiệu ứng hover này

/* Opacity #2 */
.hover12 figure {
 background: #1abc9c;
}
.hover12 figure img {
 opacity: 1;
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover12 figure:hover img {
 opacity: .5;
}

Hiệu ứng Hover Flashing


Code HTML như sau: 

<div class="hover13">
<figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfn6A29P8DFZFVPhtv5tyAIouThSV-Wfk19qlXpydaNVFt-8puWwJnfWd7PwgQDcU-fhLDbFhiYz8Ol_GUIF1x4wbTOcFeZ9BTNMmbEuZQxSgbS3C49Qbrw4DfjQo5bnNtB-1BeQ_b0vD/s1600/anh-dep-gai-xinh.jpg" /></figure>
</div>

CSS cho hiệu ứng hover này

/* Flashing */
.hover13 figure:hover img {
 opacity: 1;
 -webkit-animation: flash 1.5s;
 animation: flash 1.5s;
}
@-webkit-keyframes flash {
 0% {
  opacity: .4;
 }
 100% {
  opacity: 1;
 }
}
@keyframes flash {
 0% {
  opacity: .4;
 }
 100% {
  opacity: 1;
 }
}

Hiệu ứng Hover Shine


Code HTML như sau: 

<div class="hover14">
<figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfn6A29P8DFZFVPhtv5tyAIouThSV-Wfk19qlXpydaNVFt-8puWwJnfWd7PwgQDcU-fhLDbFhiYz8Ol_GUIF1x4wbTOcFeZ9BTNMmbEuZQxSgbS3C49Qbrw4DfjQo5bnNtB-1BeQ_b0vD/s1600/anh-dep-gai-xinh.jpg" /></figure>
</div>

CSS cho hiệu ứng hover này

/* Shine */
.hover14 figure {
 position: relative;
}
.hover14 figure::before {
 position: absolute;
 top: 0;
 left: -75%;
 z-index: 2;
 display: block;
 content: '';
 width: 50%;
 height: 100%;
 background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
 background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
 -webkit-transform: skewX(-25deg);
 transform: skewX(-25deg);
}
.hover14 figure:hover::before {
 -webkit-animation: shine .75s;
 animation: shine .75s;
}
@-webkit-keyframes shine {
 100% {
  left: 125%;
 }
}
@keyframes shine {
 100% {
  left: 125%;
 }
}

Hiệu ứng Hover Circle


Code HTML như sau: 

<div class="hover15">
<figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfn6A29P8DFZFVPhtv5tyAIouThSV-Wfk19qlXpydaNVFt-8puWwJnfWd7PwgQDcU-fhLDbFhiYz8Ol_GUIF1x4wbTOcFeZ9BTNMmbEuZQxSgbS3C49Qbrw4DfjQo5bnNtB-1BeQ_b0vD/s1600/anh-dep-gai-xinh.jpg" /></figure>
</div>

CSS cho hiệu ứng hover này

/* Circle */
.hover15 figure {
 position: relative;
}
.hover15 figure::before {
 position: absolute;
 top: 50%;
 left: 50%;
 z-index: 2;
 display: block;
 content: '';
 width: 0;
 height: 0;
 background: rgba(255,255,255,.2);
 border-radius: 100%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 opacity: 0;
}
.hover15 figure:hover::before {
 -webkit-animation: circle .75s;
 animation: circle .75s;
}
@-webkit-keyframes circle {
 0% {
  opacity: 1;
 }
 40% {
  opacity: 1;
 }
 100% {
  width: 200%;
  height: 200%;
  opacity: 0;
 }
}
@keyframes circle {
 0% {
  opacity: 1;
 }
 40% {
  opacity: 1;
 }
 100% {
  width: 200%;
  height: 200%;
  opacity: 0;
 }
}

Trên đây là những sưu tầm chia sẻ cách thực hiện những hiệu ứng Hover Image (rê chuột vào hình ảnh) rất đẹp và đơn giản chỉ cần sử dụng CSS.
Mong rằng bài viết sẽ giúp các bạn làm cho website trở nên đẹp và cuốn hút hơn nhé.
Chuyên Mục :
tháng 6 17, 2020

Mới Nhất Cùng Chuyên Mục

Bài Ngẫu Nhiên Cùng Chuyên Mục

Bình Luận

LaiXe.Xyz

Blog Lái Xe, chia sẻ thông tin về luật giao thông đường bộ, biển báo giao thông, thông tin về xe ô tô, thi bằng lái xe các hạng bằng A1, A2, B1, B2, C, D, E, F

Thi Thử Lái Xe B2 Mới Nhất

"Tiến hành giảng dạy bộ 600 câu hỏi vào tháng 06/2020 và áp dụng thi sát hạch vào tháng 10 năm 2020. Bộ đề 600 câu hỏi sẽ được phát hành dạng sách khoảng tháng 5/2020."

Blog Lái Xe

Giới Thiệu

Điều Khoản Sử Dụng

Chính Sách Bảo Mật

Sơ đồ website

Liên Kết: Spa Vung Tau | Phát Triển Bởi | LaiXe.Xyz
DMCA.com Protection Status