Hover image css

Các bạn đang xem chuyên mục Hover image css tại LaiXe.Xyz. Trang thông tin tổng hợp Hover image css chọn lọc hay nhất và mới nhất.

Hiệu ứng hover hình ảnh kèm theo Caption

Hiệu ứng hover hình ảnh kèm theo Caption
Bài viết này LaiXe.Xyz muốn chia sẻ đến các bạn một hiệu ứng hover image rê chuột vào hình ảnh kèm theo caption hoặc mô tả sẽ xuất hiện.
tháng 6 26, 2020

Lại một hiệu ứng Hover Image đẹp dành cho các bạn

Lại một hiệu ứng Hover Image đẹp dành cho các bạn kết hợp cùng với Icon của ionicons. Hi vọng các bạn sẽ thích thú với chia sẻ này
tháng 6 26, 2020

Chia sẻ một hiệu ứng đẹp Hover Image - Rê chuột vào hình ảnh

Hiệu ứng rê chuột vào hình ảnh
Bài viết này LaiXe.Xyz xin tiếp tục chia sẻ một hiệu ứng khi rê chuột vào hình ảnh rất đẹp chỉ cần sử dụng CSS3 là có thể làm được. Mời các bạn cùng theo dõi nhé
tháng 6 26, 2020

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


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é.
tháng 6 17, 2020

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