logo_thiet_ke_website
Trang chủ»Blog»Thủ thuật web

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

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.

 

  thu thuat web thu thuat css3 image hover effects

Đánh giá

Bài viết liên quan

Danh mục bài viết

Có thể bạn cần đọc?

Bài viết mới nhất

Giới thiệu sơ sơ

Tôi là Vương hiện đang làm IT phần mềm tại Thành phố Hồ Chí Minh. Tôi nhận thiết kế website tại nhà giá rẻ, lập trình phần mềm theo yêu cầu, nhận viết content...

Phone: 0352.833.656

Mail: vuongtranitc@gmail.com

Địa chỉ: Số 8 Đường TA 15, Phường Thới An, Quận 12, TP.HCM (Chung cư Võ Đình)

Xem thêm về tôi

Thiết kế web

Dịch vụ

Chia sẻ

Vương IT là freelancer nhận các dự án lập trình, thiết kế website tại Quận 12 TPHCM. Nhận thiết kế web hcm giá rẻ và các dự án phần mềm theo yêu cầu. Vương là một freelancer thiết kế web đã có hơn 7+ kinh nghiệm thiết kế và lập trình web cho hơn 200+ dự án lớn nhỏ. Hy vọng Vương sẽ được hợp tác cùng mọi người trong thời gian sớm nhất nhé! Add zalo của Vương nha zalo.me/0352833656

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

x