Hiệu ứng Overlay image Hover Effects bằng CSS3

Mục lục bài viết

Web7b.com giới thiệu tới bạn đọc cách làm hiệu ứng Hover chuột vào hình ảnh hiện lớp Overlay bằng CSS3 khá mượt mà, thích hợp cho các website sử dụng Gallery image tạo hiệu ứng bắt mắt một chút.

Các thủ thuật hay khác:

Hiệu ứng image hover effects bằng CSS3
Click xem live demo

Cách làm vô cùng đơn giản, chỉ cần copy các đoạn code dưới đây và dán vào Project của các bạn:

Đây là code HTML hoàn chỉnh:

<html lang="vi-VN">
<head>
  <meta charset="utf-8">
<style>
.container {
  position: relative;
  width: 300px;
  margin:auto;
  text-align:center;
}

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

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

.container:hover .overlay {
  bottom: 0;
  height: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h2 style="text-align:center">Demo hiệu ứng Hover image Effects</h2>
<p style="text-align:center">Hover chuột vào hình để thấy hiệu ứng</p>

<div class="container">
  <img src="http://web7b.com/files/assets/demo/img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>
<p style="text-align:center">Trở về bài viết: <a href="https://web7b.com/hieu-ung-image-hover-effects-bang-css3-bid84.html">Hiệu ứng image Hover Effects bằng CSS3</a></p>
 
</body>
</html>

Giải thích từng dòng:

.container {
  position: relative;
  width: 300px;
  margin:auto;
  text-align:center;
}

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

Đoạn trên dùng để quy định kích thước hiển thị cho Block hình.

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

.container:hover .overlay {
  bottom: 0;
  height: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

Đoạn trên xử lý hiệu ứng khi hover chuột và hình ảnh.

<div class="container">
  <img src="http://web7b.com/files/assets/demo/img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

Đoạn trên là code HTML dùng để hiển thị hình ảnh và hiệu ứng lên trang người dùng. Ban đầu class overlay sẽ có thuộc tính height:0 nên không được hiển thị ra ngoài. Khi người dùng hover chuột vào hình thì CSS sẽ bắt sự kiện hover và gán cho class overlay có thuộc tính height:100% với hiệu ứng CSS3.

Mình nghĩ thủ thuật trên cũng khá đơn giản, nếu các bạn tinh ý một chút thì có thể áp dụng dễ dàng cho website của mình.

Chúc các bạn thành công.

 

Đánh giá

Copyright © 2015 - 2021. Designed by Vuong Tran DMCA.com Protection Status