JQ version of the image of the mouse to put the effect of

Page effect often used in hover effect of the picture, presented in this article is written using Jquery effect, compared ImageHover.css better compatibility.

compatibility

The use of plug-in is jquerywritten, so compatibility than ImageHover.css better. If you do not consider the compatibility of recommendations to consider ImageHover.css this plug-in style more.

The demo Address

Demo：http://weber.pub/demo/160920/index.html

download

Download

Links: http://pan.baidu.com/s/1qXPy5y8 Password: 7b8i

use

• 1, css style code

.hover-down{
    width: 285px;
    height: 150px;
    position: relative;
    overflow: hidden;
}
.hover-down img{
    position: absolute;
}
.hover-down .hd-font{
    position: absolute;
    width: 285px;
    height:150px;
    z-index: 1;
    margin-top: -150px;
    color: #ddd;
    background: #000;
    filter:alpha(opacity=80);
    -moz-opacity:0.8;
    opacity: 0.8;
}
.hd-font span{
    padding: 20px;
    font-size: 14px;
    display: inline-block;
    line-height: 18px;
}
.hover-up{
    width: 285px;
    height: 135px;
    position: relative;
    overflow: hidden;
    background: #fff;
}
.hover-up img{
    width: 100px;
}
.hover-up .hu-font{
    height: 135px;
    width: 285px;
}
.hover-up .qr{
    position: absolute;
    width: 285px;
    height:135px;
    line-height: 135px;
    z-index: 1;
    margin-bottom: -135px;
    background: #fff;
    text-align: center;
}
.hover-up a{
    color: #4b8ce5;
}
.hover-up a:hover{
    color: #f8b600;
}

• 2, HTML Code

<div class="hover-down">
    <div class="hd-font">
        <span>web.pub测试文字测试web.pub测试测试文字</span>
    </div>
    <img src="img/11.jpg" alt="web.pub测试文字测试">
</div>
<div class="hover-up">
    <div class="hu-font center pr-lg pl-lg">
        <p class="f-20 c-333 mb-xs pt-md">web.pub</p>
        <p class="f-14 c-666 mb-none">web开发者-努力学习中、、</p>
        <hr class="solid mt-md mb-md">
        <a href="" class="">参观网站</a>
    </div>
    <div class="qr">
        <img src="img/qr.png" alt="web.pub">
    </div>
</div>

• 3, js codes (need to introduce jQuery)

$('.hover-down').hover(function () {
    $(this).addClass(' case-test');
    $('.case-test .hd-font').animate({marginTop:'0px'},'1000')
},function () {
    $('.case-test .hd-font').animate({marginTop:'-150px'},'1000')
    $(this).removeClass(' case-test');
})
$('.hover-up').hover(function () {
    $(this).addClass(' case-test');
    $('.case-test .qr').animate({marginTop:'-135px'},'1000')
},function () {
    $('.case-test .qr').animate({marginTop:'0px'},'1000')
    $(this).removeClass(' case-test');
})

Demo Address: http://weber.pub/demo/160920/index.html

end

by Weber.pub

This article addresses: mouse hover effect http://weber.pub/jq version of the image of /211.html

This article is reproduced in: ape → 2048 https://www.mk2048.com/blog/blog.php?id=hh2ch0j12jb