Loading
0

CSS3技巧:使用transform做鼠标经过图片上拉出现文字效果

使用CSS3制作一个鼠标悬浮,图片上拉出现文字内容的一个效果。

演示示例

xuanfutexiao.gif

演示地址

点我进入

代码展示

页面部分

<div class="main">
<div class="view view-tenth">
<figure>
<div class="thumb"><img src="http://img.liuguodong.net/2016/11/22/300x195-1.jpg" alt="fengjing" /></div>
<div class="mask">
<h2>Liu Guodong's Blog</h2>
<p>关注于web前端和WordPress,也会分享优秀的个人博客模板...</p>
<a href="http://www.liuguodong.net/tag/code" class="link">查看全文</a>
</div>
</figure>
</div>
<div class="view view-tenth">
<figure>
<div class="thumb"><img src="http://img.liuguodong.net/2016/11/22/300x195-2.jpg" alt="fengjing" /></div>
<div class="mask">
<h2>Liu Guodong's Blog</h2>
<p>关注于web前端和WordPress,也会分享优秀的个人博客模板...</p>
<a href="http://www.liuguodong.net/tag/code" class="link">查看全文</a>
</div>
</figure>
</div>
<div class="view view-tenth">
<figure>
<div class="thumb"><img src="http://img.liuguodong.net/2016/11/22/300x195-3.jpg" alt="fengjing" /></div>
<div class="mask">
<h2>Liu Guodong's Blog</h2>
<p>关注于web前端和WordPress,也会分享优秀的个人博客模板...</p>
<a href="http://www.liuguodong.net/tag/code" class="link">查看全文</a>
</div>
</figure>
</div>
<div class="view view-tenth">
<figure>
<div class="thumb"><img src="http://img.liuguodong.net/2016/11/22/300x195-4.jpg" alt="fengjing" /></div>
<div class="mask">
<h2>Liu Guodong's Blog</h2>
<p>关注于web前端和WordPress,也会分享优秀的个人博客模板...</p>
<a href="http://www.liuguodong.net/tag/code" class="link">查看全文</a>
</div>
</figure>
</div>
</div>

 

样式部分

.main *{
padding:0;
margin:0;
font-family:'Source Code Pro', Menlo, Consolas, Monaco, monospace;
box-sizing: border-box;
-webkit-box-sizing: border-box;

}
.main {
position: relative;
width: 680px;
margin: 0 auto;
}
.view {
width: 300px;
margin: 10px;
float: left;
border: 10px solid #fff;
-webkit-box-shadow: 1px 1px 2px #e6e6e6,-1px -1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6,-1px -1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6,-1px -1px 2px #e6e6e6;
cursor: default;
}
.view figure {
margin: 0;
position: relative;
}
.view figure img {
max-width: 100%;
display: block;
position: relative;
}
.view .thumb {
overflow: hidden;
}
.view .mask {
position: absolute;
top: 0;
left: 0;
bottom:0;
width: 100%;
top: auto;
bottom: 0;
padding: 15px;
background: rgb(233, 194, 236);
color: #607D8B;
}

.view .mask h2 {
margin: 0 0 5px;
padding: 0 0 5px;
color: #fff;
font-size: 18px;
line-height:14px;
border-bottom:1px solid rgba(255,255,255,.2);
}
.view .mask p{
font-size: 14px;
margin-bottom: 5px;
}
.view .link {
text-align: center;
padding: 5px 10px;
border-radius: 2px;
display: inline-block;
background: #2196F3;
color: #fff;
text-decoration:none;
font-size: 14px;
}

.view-tenth figure {
overflow: hidden;
}

.view-tenth figure img {
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}

.view-tenth figure:hover img{
-webkit-transform: translateY(-50px);
-moz-transform: translateY(-50px);
-ms-transform: translateY(-50px);
transform: translateY(-50px);
}

.view-tenth .mask {
opacity: 0;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;
}

.view-tenth figure:hover .mask {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;
}
声明:本文为原创,作者为 刘国栋,转载时请保留本声明及附带文章链接:http://www.liuguodong.net/477.html

最后编辑于:2016/11/21作者: 刘国栋

刘国栋

刘国栋个人博客,是记录博主学习和成长的个人博客网站,关注于web前端和WordPress经验与技巧方面的学习和分享,也会分享一些优秀的个人博客模版。

2 条回应

发表评论

电子邮件地址不会被公开。 必填项已用*标注

arrow grin ! ? cool roll eek evil razz mrgreen smile oops lol mad twisted wink idea cry shock neutral sad ???

  1. 2#

    都是代码。

    都是代码。

  2. 1#

    哈哈,这个有意思

扫一扫关注刘国栋个人博客

扫一扫关注刘国栋个人博客