演示效果

前端html代碼

<div class="play_name">
        <span class="title1">成為光芒 完整版</span>
        <span class="cname1">Block B </span>
        <div class="ico_play"></div>
    </div>

css樣式

.play_name {
    background-image: url(sze.jpg);
    width: 220px;
    height: 124px;
    cursor:pointer;
    border:1px solid #fff;
}
.play_name:hover {
    border:1px solid #cf9;
}

.play_name:hover .ico_play{
    background-image: url(ico_play.png);
}

.title1 {
    display: block;
    padding-top: 80px;
    padding-left: 4px;
    font: 12px/1.5 Tahoma, "微軟雅黑";
    color: #fff;
    font-weight:bold;
}

.cname1 {
    display: block;
    padding-left: 4px;
    font: 12px/1.5 Tahoma, "微軟雅黑";
    color: #cf9;
    font-weight:bold;
}
.ico_play {
    position: absolute;
    top: 48px;
    left: 90px;
    width: 60px;
    height: 60px;
}

下面是我用織夢DEDECMS的模板，修改的樣式，有需要的可以借鑒一下

模板里面的代碼：

<ul>
{dede:arclist typeid=12 row=10 titlelen=80 orderby='pubdate' }
	
<li><a href="[field:filename/]" title="[field:title/]">
	<div class="play_name"><img src="[field:litpic/]" title="[field:title/]" alt="[field:title/]"><div class="ico_play"></div>
	<h4>[field:title/]</h4>
	</div>
	</a>
</li>
{/dede:arclist}
</ul>

樣式：

.play_name {
    width: 286px;
    height: 160px;
    cursor:pointer;
    border:1px solid #fff;
	position: relative;
}
.play_name:hover {
    border:1px solid #cf9;
}

.play_name:hover .ico_play{
    background-image: url(/templets/2018/images/ico_play.png);
}

.ico_play {
    position: absolute;
    top: 48px;
    left: 110px;
    width: 60px;
    height: 60px;
}

本例所用素材打包下載：