播放按钮效果

一、HTML代码

<div class="box">

<a href="#">

<div class='item'>

<div class="pic"><img src="./images/xueba.jpg" alt=""></div>

<p>【全民学霸】十八岁的天空</p>

</div>

</a>

</div>

二、CSS代码

.box .pic {

position: relative;    /*父相*/

}

/*  pic::after 伪元素，有内容的虚拟容器 */

/* 播放按钮压在图片上面 - 居中 */

.box .pic::after {

position: absolute;    /*子绝*/

left: 50%;

top: 50%;

content: '';

width: 58px;          /*播放按钮图像宽度高度，各58px*/

height: 58px;

background-image: url(./images/play.png);

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

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

opacity: 0;          /* 透明,不显示 */

transition: all .5s;

z-index: 9;

}

/* 移上去的时候*/

.box .item:hover .pic::after {

opacity: 1;          /*不透明，显示*/

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

}