浙江 杭州

30种炫酷html5鼠标滑过图片标题显示效果

系统分类: 网页特效 - css3 - css3 渐变/圆角/阴影 2015-09-07

人气10744

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


现在的网站越做越精美,用户体验要求越来越高,这个插件给你展示了30种html5和css3鼠标滑过图片时图片显示标题的炫酷效果。这些鼠标滑过图片效果都使用了html5和css3 3D transform等技术制作。

这款插件集合和30种html5不同效果的鼠标滑过图片时标题动画效果。

这个插件使用css 3D transforms和伪元素来制作动画效果。请确保你的浏览器支持这些css3特性。另外,在文本上使用css transitions时,火狐浏览器存在一些小bug(文本看起来不是十分的平滑)

插件中精美的图片来自于Unsplash

HTML

<div class="grid">
  <figure class="effect-lily">
    <img src="img/1.jpg" alt="img01"/>
    <figcaption>
      <h2>Nice <span>Lily</span></h2>
      <p>Lily likes to play with crayons and pencils</p>
      <a href="http://www.htmleaf.com/">View more</a>
    </figcaption>     
  </figure>
  <!-- ... -->
</div>
                

CSS

下面列出了“Sadie”效果的css代码,我们将在伪元素上使用线性渐变来制作标题动画效果。

figure.effect-sadie figcaption::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
  content: '';
  opacity: 0;
  transform: translate3d(0,50%,0);
}

figure.effect-sadie h2 {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  color: #484c61;
  transition: transform 0.35s, color 0.35s;
  transform: translate3d(0,-50%,0);
}

figure.effect-sadie figcaption::before,
figure.effect-sadie p {
  transition: opacity 0.35s, transform 0.35s;
}

figure.effect-sadie p {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 2em;
  width: 100%;
  opacity: 0;
  transform: translate3d(0,10px,0);
}

figure.effect-sadie:hover h2 {
  color: #fff;
  transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
}

figure.effect-sadie:hover figcaption::before ,
figure.effect-sadie:hover p {
  opacity: 1;
  transform: translate3d(0,0,0);
}
                

其它精美效果请参看下载的源文件。

查看演示
下载资源:6
下载资源
错误提交:

格式:zip 大小:1.15M

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1166.html 非特殊说明,本文版权归原作者所有,转载请注明出处
30种炫酷html5鼠标滑过图片标题显示效果

我当前G币余额:0 已下载次数:6

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

评论功能关闭...(已有2 评论)