<h2>淡入效果 - 从上至下</h2>

<p>鼠标移动到图片上查看效果</p>

​

<div class="container">

  <img src="https://static.runcodex.com/images/mix/img_avatar.png" alt="Avatar" class="image">

  <div class="overlay">

    <div class="text">Hello World</div>

  </div>

</div>

.container {

  position: relative;

  width: 50%;

}

​

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

}