3个有趣的CSS3图片hover动效-经验/观点-UICN用户体验设计平台

恭喜你成为UI中国推荐设计师（详情）

快速搭建网站

查看全部热门榜单

全部

常用搜索：作品集 AE ui设计 aigc icon logo app

您的意见是我们 UI 中国进步的动力！

点击立即反馈按钮，发表您的意见！

立即反馈

QQ群反馈

您也可以加入UI中国官方反馈群进行反馈！

群号：302892100

备注：反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作，请填写需求表单，我们会在第一时间与您联系！

0/20

0/200

设计大赛

设计大赛
发布广告
发布招聘
其它需求

取消发送需求

提交完成
感谢您对UI中国的支持和信赖！

我知道了

3个有趣的CSS3图片hover动效

0.0°

2015-11-20 自译外文 经验/观点 原作者： Samuel Norton 举报 7304 30 15 2

D_Young 关注

今天带给大家一篇自己翻译的文章，3个简单的hover动效效果，初次翻译有不对的地方大家多多见谅。本文源码在下边可以打包下载

现代网络中，很多技术形式可以实现有趣的动效，但最简单优雅的通常是CSS，特别是新增加的CSS3。

过去，我们不得不依靠JavaScript实现动效，但由于跨浏览器支持CSS3不断地升级，现在我们可以不通过任何脚本实现。但是很悲催，仍然有浏览器（IE9以下）不支持CSS3，所有你需要一个旧版的浏览器或设置渐进性效果来解决兼容性问题。

今天我们来看一个炫酷的悬停效果--图片和文字标题的隐藏、显示切换动效。

Demo 1

点击查看效果

我们看下Deme 1最简单的效果，鼠标滑过，图片会从右侧飞出显示标题文字。

标记部分

我们的第一个演示的HTML中我们将使用一个无序列表，然后将标题里面的图像。请注意，我们也会在无序列表标签添加类demo-1和效果。标记看起来像这样：我们第一个DEMO中,html部分会使用无序列表标记图像和文字。我们在标签中使用了class类“demo-1”、“effect”。如下：

<ul class="demo-1 effect">
<li>
<h2>This is a cool title!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
</li>
<li>
<img class="top" src="images/image1.jpg" alt=""/>
</li>
</ul>

CSS样式部分

CSS部分，我们设置“relative”定位“demo-1”并且设置宽高。我们通常隐藏溢出部分。除了图片外，也需要给“h2”和“p”标签等添加一些基础样式。我们给动效class添加绝对定位并且添加上下-15px外补丁；使用CSS3的“transition”创建平滑动效，如下:

.demo-1 {
   position:relative;
   width:300px;
   height:200px;
   overflow:hidden;
   float:left;
   margin-right:20px;
   background-color:rgba(26,76,110,0.5)
}
.demo-1 p,.demo-1 h2 {
   color:#fff;
   padding:10px;
   left:-20px;
   top:20px;
   position:relative
}
.demo-1 p {
   font-family:'Lato';
   font-size:12px;
   line-height:18px;
   margin:0
}
.demo-1 h2 {
   font-family:'Lato';
   font-size:20px;
   line-height:24px;
   margin:0;
}
.effect img {
   position:absolute;
   margin:-15px 0;
   right:0;
   top:0;
   cursor:pointer;
   -webkit-transition:top .4s ease-in-out,right .4s ease-in-out;
   -moz-transition:top .4s ease-in-out,right .4s ease-in-out;
   -o-transition:top .4s ease-in-out,right .4s ease-in-out;
   transition:top .4s ease-in-out,right .4s ease-in-out
}
.effect img.top:hover {
   top:-230px;
   right:-330px;
   padding-bottom:200px;
   padding-left:300px
}

Demo 2

点击查看效果

第二个demo展示图片向下滑动. 这样意味着当你鼠标划过图片时候，文字标题会从上边展示。

标记部分

这个demo的html部分, 和第一个demo非常类似. 这次我们使用“demo-2”并且添加“zero”class:

<ul class="demo-2 effect">
<li>
    <h2 class="zero">
      This is a cool title!
    </h2>
    <p class="zero">
      Lorem ipsum dolor sit amet.
    </p>
</li>
<li>
    <img class="top" src="images/image1.jpg" alt="" />
</li>
</ul>

CSS样式部分

CSS部分依然和第一个demo类似, 除了设置bottom属性的值-96px.依然使用CSS3的“transition”创建平滑动效

.demo-2 {
   position:relative;
   width:300px;
   height:200px;
   overflow:hidden;
   float:left;
   margin-right:20px;
   background-color:rgba(26,76,110,0.5) }
.demo-2 p,.demo-2 h2 {
   color:#fff;
   padding:10px;
   left:-20px;
   top:20px;
   position:relative }
.demo-2 p {
   font-family:'Lato';
   font-size:12px;
   line-height:18px;
   margin:0 }
.demo-2 h2 {
   font-size:20px;
   line-height:24px;
   margin:0;
   font-family:'Lato' }
.effect img {
   position:absolute;
   left:0;
   bottom:0;
   cursor:pointer;
   margin:-12px 0;
   -webkit-transition:bottom .3s ease-in-out;
   -moz-transition:bottom .3s ease-in-out;
   -o-transition:bottom .3s ease-in-out;
   transition:bottom .3s ease-in-out }
.effect img.top:hover {
   bottom:-96px;
   padding-top:100px }
h2.zero,p.zero {
   margin:0;
   padding:0 }

Demo 3

点击查看效果

最后一个demo,我们添加一个卡片翻转动效. 意味着鼠标滑过图片的时候，它会自动旋转并且显示描述部分。

标记部分

最后一个demo,我们使用不同的结构. 首先我们使用HTML5的“figure”元素,并且在内部添加“figcaption”标签. 在列表中使用“demo-3”class:

<ul class="demo-3">
<li>
    <figure>
      <img src="images/image1.jpg" alt="" />
      <figcaption>
        <h2>
          This is a cool title!
        </h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nost.
        </p>
      </figcaption>
    </figure>
</li>
</ul>

CSS样式部分

CSS中, 给figure添加“relative”定位;并且隐藏“backface-visibility”. 给“figcaption”设置“transform”属性“rotateY”的值 -180 deg；并且鼠标滑过图片时候转换成180 deg：

.demo-3 {
   position:relative;
   width:300px;
   height:200px;
   overflow:hidden;
   float:left;
   margin-right:20px }
.demo-3 figure {
   margin:0;
   padding:0;
   position:relative;
   cursor:pointer;
   margin-left:-50px }
.demo-3 figure img {
   display:block;
   position:relative;
   z-index:10;
   margin:-15px 0 }
.demo-3 figure figcaption {
   display:block;
   position:absolute;
   z-index:5;
   -webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
   box-sizing:border-box }
.demo-3 figure h2 {
   font-family:'Lato';
   color:#fff;
   font-size:20px;
   text-align:left }
.demo-3 figure p {
   display:block;
   font-family:'Lato';
   font-size:12px;
   line-height:18px;
   margin:0;
   color:#fff;
   text-align:left }
.demo-3 figure figcaption {
   top:0;
   left:0;
   width:100%;
   height:100%;
   padding:29px 44px;
   background-color:rgba(26,76,110,0.5);
   text-align:center;
   backface-visibility:hidden;
   -webkit-transform:rotateY(-180deg);
   -moz-transform:rotateY(-180deg);
   transform:rotateY(-180deg);
   -webkit-transition:all .5s;
   -moz-transition:all .5s;
   transition:all .5s }
.demo-3 figure img {
   backface-visibility:hidden;
   -webkit-transition:all .5s;
   -moz-transition:all .5s;
   transition:all .5s }
.demo-3 figure:hover img,figure.hover img {
   -webkit-transform:rotateY(180deg);
   -moz-transform:rotateY(180deg);
   transform:rotateY(180deg) }
.demo-3 figure:hover figcaption,figure.hover figcaption {
   -webkit-transform:rotateY(0);
   -moz-transform:rotateY(0);
   transform:rotateY(0) }