Live Code Editor Version 2.0

Hướng dẫn tạo Image Hover Overlay với CSS - Demo 2 RUN

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
          .main {
            width: 500px;
            text-align: center;
            margin: auto;
          }
          .container {
            position: relative;
            width: 100%;
          }

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

.overlay {
            position: absolute;
            bottom: 100%;
            left: 0;
            right: 0;
            background-color: #888888;
            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> 
      <div class="main">
        <h2>Freetuts.net hướng dẫn tạo Image Hover Overlay</h2>
        <p>Hover lên ảnh để xem hiệu ứng</p>
        <div class="container">
          <img src="https://freetuts.net/upload/tut_post/images/2017/08/06/987/demo.jpg" alt="Avatar" class="image">
          <div class="overlay">
            <div class="text">Freetuts.net</div>
          </div>
        </div>
      </div>
    </body>
</html>