Chia sẻ hiệu ứng CSS rê chuột vào hình ảnh

views

A+A-

PrintEmail

Bạn muốn website mình có thêm những hiệu ứng đẹp khi rê (trỏ) chuột vào hình ảnh. Hãy cùng đọc qua bài viết này để được hướng dẫn

Hiệu ứng Flash khi rê chuột vào hình ảnh

Ví dụ 1:

Bạn hãy thử rê chuột vào ảnh này

Thêm Code HTML

<img class="flash" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibSZLOoA7g-x0GTj04lM7Q-98uNZcgKNtl174x9PwZfbcLg7M1C3-OzSrMqM_AhkTTkuF8pu2fgs0mjW0ORs8Nwxkz620HL2Rkpoa9jUgTl9gi4Zw1i_3NqC5fJGzFa2QsKGXjEwPkHbJj/s320/pexels-photo-1035682.jpeg" />

Thêm CSS như sau:

@-webkit-keyframes flash {
 0% { opacity: .3; }
 100% { opacity: 1; }
}
@keyframes flash {
 0% { opacity: .3; }
 100% { opacity: 1; }
}
.flash:hover {
 opacity: 1;
 -webkit-animation: flash 1s;
 animation: flash 1s;
}

15 hiệu ứng Css đẹp dùng khi rê chuột vào hình ảnh

---

Ví dụ 2:

Hãy thử di chuyển con chuột vào hình ảnh

Thêm Code HTML

<img class="flash2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibSZLOoA7g-x0GTj04lM7Q-98uNZcgKNtl174x9PwZfbcLg7M1C3-OzSrMqM_AhkTTkuF8pu2fgs0mjW0ORs8Nwxkz620HL2Rkpoa9jUgTl9gi4Zw1i_3NqC5fJGzFa2QsKGXjEwPkHbJj/s320/pexels-photo-1035682.jpeg" />

Thêm CSS như sau:

@-webkit-keyframes flash2 {
 0%, 50%, 100% { opacity: 1; }
 25%, 75% { opacity: 0; }
}
@keyframes flash2 {
 0%, 50%, 100% { opacity: 1; }
 25%, 75% { opacity: 0; }
}
.flash2:hover {
 opacity: 1;
 -webkit-animation: flash2 1s;
 animation: flash2 1s;
}

Hiệu Ứng Fade In khi trỏ chuột vào ảnh

Ví dụ 1: Fade In Text

LaiXe.Xyz

Cách thực hiện / create image overlay hover effects.
Bước 1: Add Code HTML

<div class="container-image">
  <img src="img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">LaiXe.Xyz</div>
  </div>
</div>

Bước 2: Add CSS

.container-image {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container-image:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

Ví dụ 2: Fade In A Box

Lái Xe

Bước 1: Add Code HTML

<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image" style="width:100%">
  <div class="middle">
    <div class="text">Lái Xe</div>
  </div>
</div>

Bước 2: Add CSS

.container {
  position: relative;
  width: 50%;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

.text {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}

Chuyên Mục : Chia sẻ CSS Hiệu ứng CSS Hướng dẫn Thiết kế website Website