Trang chủ >

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

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


Chat hỗ trợ
Chat ngay