写一个好看的hover过度效果

好的，以下是一个简单的hover过度效果，可以通过CSS3的transform和transition属性实现：

HTML代码：

<div class="box">
  <img src="image.jpg" alt="image">
  <div class="overlay">
    <h3>Title</h3>
    <p>Description</p>
  </div>
</div>

CSS代码：

.box {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.box img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s;
}

.box .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  opacity: 0;
  transition: opacity 0.5s;
}

.box:hover img {
  transform: scale(1.1);
}

.box:hover .overlay {
  opacity: 1;
}

解释：

1. .box是一个相对定位的盒子，宽度为300px，高度为200px，overflow为hidden，用于隐藏图片超出盒子的部分。
2. .box img是一个图片，宽度为100%，高度为auto，display为block，用于显示图片。
3. .box .overlay是一个遮罩层，宽度和高度都为100%，padding为20px，背景色为半透明的黑色，文字颜色为白色，opacity为0，用于遮盖图片和显示标题和描述文字。
4. 当鼠标移入.box时，图片会放大1.1倍，遮罩层的opacity会从0变为1，实现了一个简单的hover过度效果。

这个效果可以根据实际需求进行修改和扩展，比如改变遮罩层的文字样式、增加图片边框效果等等。