Tìm kiếm trên diễn đàn

Overlay image Hover Effects bằng CSS3 cực dễ

Tham gia : 11/07/2015
Website : phuonglamcompany@gmail.com

phuonglamcompany@gmail.com
Gửi vào lúc : 15/12/2017

Code HTML

<!DOCTYPE html>
<html lang="vi-VN">
<head>
  <meta charset="utf-8">
  <title>Overlay image Hover Effects with CSS3 Example</title>
</head>
<body>

<h2 style="text-align:center">Demo hiệu ứng Hover image Effects</h2>
<p style="text-align:center">Hover the mouse over the image to see the effect</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">Source: <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>

Code CSS:

.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%);
}

Xem demo thực tế: https://goo.gl/sWyaby

Ngân hàng Techcombank Trung tâm thẻ Hà Nội Số Tài Khoản : 13320470819018 Chủ tài khoản : ĐINH THỊ HƯNG GIANG	Ngân hàng Vietcombank Sở Giao Dịch Hà Nội Số tài khoản: 0011003506685 Chủ tài khoản: ĐINH THỊ HƯNG GIANG	Ngân hàng Nông Nghiệp & Phát Triển Nông Thôn Việt Nam Chi nhánh Tây Hồ Số Tài Khoản : 1506201076289 Chủ tài khoản : ĐINH THỊ HƯNG GIANG	Ngân hàng Quân Đội MB Số tài khoản: 0906200983 Chủ tài khoản: ĐINH THỊ HƯNG GIANG
Ngân hàng Đông Á Chi nhánh Hà Nội Số Tài Khoản : 0107978389 Chủ tài khoản : ĐINH THỊ HƯNG GIANG	Ngân hàng Công Thương Việt Nam - Vietinbank Chi nhánh Ba Đình – Hà Nội Số Tài Khoản : 101006354209 Chủ tài khoản : ĐINH THỊ HƯNG GIANG	Ngân hàng TMCP Á Châu ACB Chi nhánh Hà Nội Số tk: 185591549 Chủ tk: Đinh Thị Hưng Giang	Công ty TNHH phần mềm NDOT Số tài khoản: 0301000342086 Ngân hàng Vietcombank - chi nhánh Hoàn Kiếm ( quý khách vui lòng chuyển thêm 10% )

Overlay image Hover Effects bằng CSS3 cực dễ

Gửi phản hồi của bạn ( các bạn vui lòng không gửi câu hỏi khác không liên quan đến topic, nếu có câu hỏi mới xin lập topic mới )

VUI LÒNG ĐĂNG NHẬP ĐỂ GỬI PHẢN HỒI