css3鼠标悬浮图片jQuery特效

收藏

分享一个手机端常用的悬浮插件，本文演示了常用的hover效果，有圆圈circle和正方形square,你只有鼠标悬浮在图形上即可看到html5酷炫效果

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

演示一：默认圆圈效果

<div class="ih-item circle effect1">
    <a href="http://www.erdangjiade.com/js">
        <div class="spinner"></div>
        <div class="img"><img src="images/assets/2.jpg" alt="img"></div>
        <div class="info">
            <div class="info-back">
                <h3>Heading here</h3>
                <p>Description goes here</p>
            </div>
        </div>
    </a>
</div>

演示二：圆圈阴影覆盖

<div class="col-sm-6">
    <div class="ih-item circle effect2 left_to_right">
        <a href="http://www.erdangjiade.com/js">
            <div class="img"><img src="images/assets/4.jpg" alt="img"></div>
            <div class="info">
                <h3>Heading here</h3>
                <p>Description goes here</p>
            </div>
        </a>
    </div>
</div>

演示三：缩小原图，各个方向显示大图

<div class="ih-item circle effect3 bottom_to_top">
    <a href="http://www.erdangjiade.com/js">
        <div class="img"><img src="images/assets/3.jpg" alt="img"></div>
        <div class="info">
            <h3>Heading here</h3>

            <p>Description goes here</p>
        </div>
    </a>
</div>

其他演示效果请看演示里面的html5+css效果，很酷炫，你可以很方便的应用到手机端