独特的图片悬停效果-ORIGINAL HOVER EFFECTS

所属分类:媒体-图片展示

 35267  373  查看评论 (6)
分享到微信朋友圈
X
独特的图片悬停效果-ORIGINAL HOVER EFFECTS ie兼容10

Original Hover Effects为我们提供了多种鼠标覆盖图片后的显示样式。该效果由css3打造而成,所以只能运行在支持css3的浏览器中。


使用步骤

1、该效果的html标记很简单而且直观,只需要创建一个包含图片和信息的容器即可。

<div class="view">
    <img src="image.gif">
    <div class="mask"> 
        <h2>
            Title
        </h2>
        <p>
            Your Text
        </p>
              <a href="#" class="info">Read More</a>
    </div>
</div>	

 
2、创建好html标记后,我们就可以来设置样式了

 .view {
    width: 300px;
    height: 200px;
    margin: 10px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff url(../images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content {
    width: 300px;
    height: 200px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}
.view img {
    display: block;
    position: relative
}
.view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0
}
.view p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center
}
.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
}
.view a.info:hover {
    box-shadow: 0 0 5px #000
}


3、Original Hover Effects 有10种效果,对于不同的效果与之对应的是不同的样式。我们可以查看示例中的源码来实现相应的效果,在此我就不一一做讲解了。

相关插件-图片展示

jQuery支持图片放大缩小查看效果

e-smart-zoom-jquery.js插件页面上提供了两个按钮,可以让你的图片点击放大或者缩小当然,对于懒人来说,真是懒得点击那么你可以将鼠标悬停在图片上,滚动鼠标滚轮即可实现图片的放大或者缩小效果
  图片展示
 180361  563

立体图片展示

图片随鼠标转向
  图片展示
 35024  482

jQuery鼠标滚轮放大缩小查看图片(原创)

使用jquery实现点击放大图片之后,使用鼠标滚轮放大缩小图片,点击遮罩关闭图片
  图片展示
 60349  380

焦点效果

类似于百叶窗的效果
  图片展示
 35070  362

讨论这个项目(6)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    librad 0
    2017/7/27 14:45:23
    leavedog 0
    2016/9/6 17:09:53
    小小鸟 0
    2016/4/14 0:04:20
    效果真的很不错!!!!!太牛掰了。。 回复
    Zero互惠 0
    2015/4/13 10:05:59
    Ashley_JieD 0
    2014/12/15 23:39:11
    Legend 0
    2014/12/10 21:50:44
    貌似可兼容至ie10 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复