dedecms,织梦,搞笑段子,织梦伪静态规则,织梦全站伪静态,织梦手机版伪静态

CSS图片上面添加播放图标示例

工作手记 baishitou 85℃ 0评论

鼠标移动到图片上显示播放图标示例

演示效果

前端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;
}

本例所用素材打包下载: 实现鼠标放在图片上显示一个播放图标 (下载8)

 

转载请注明:白石头博客 » CSS图片上面添加播放图标示例

喜欢 (1)or分享 (0)

您必须 登录 才能发表评论!