<div class="box">

<div class="pic">

<img src="https://i.loli.net/2020/11/27/yJB8nUfDRLIWSgv.jpg" alt="">

<!-- 这个位置显示缩放的按钮 -->

</div>

<p>插画图片，大吉大利和平年，插画图片！

</p>

</div>

​

body {

  display: flex;

  justify-content: center;

  align-items: center;

}

.box {

  width: 230px;

  height: 280px;

  overflow: hidden;

  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.3);

  border-radius: 3px;

  border: 1px solid #000;

  text-align: center;

}

.box p {

  color: red;

  height: 40px;

}

.box .pic {

  position: relative;

  height: 210px;

  text-align: center;

}

img {

  width: 200px;

}

​

/* 1. 摆放一个播放按钮 压在图片的上面;2.hover效果 */

.box .pic::after {

  content: "";

  width: 58px;

  height: 58px;

  background-image: url(https://s2.loli.net/2024/05/21/zn5WNjQoxAJFrTk.png);

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%) scale(8);

  opacity: 0;

  transition: all 0.8s;

}

​

.box:hover .pic::after {

  opacity: 1;

  transform: translate(-50%, -50%) scale(1.5);

}

​