Question

I want to make a hover effect using jquery. Opacity and a simple zoom icon.

This is what i´ve got:

$(document).ready(function() {

$('.mpost-t1-img').animate ({
    opacity: 1
});

$('.mpost-t1-img').hover(function() {
    $(this).stop().animate({opacity:.5});
}, function(){
    $(this).stop().animate({opacity:1});

});

This works for the opacity. But how can I add the image to the hover state? Thank you!

Answer 1

(Update)
I’ve read in other comments that you want overlay. For basic overlay you don’t need any JS, but pure CSS. Below is example.

CSS:

.gallery a {
    display: block;
    float: left;
    position: relative;
    width: 168px;
    height: 128px;
    margin: 2px;
}

.gallery a img {
    max-width: 168px;
    max-height: 128px;
}

.gallery a .overlay {
    background-image: url('http://www.urbanoid.hu/wp/empire/wp-content/themes/empire/images/image_overlay.png'); 
    background-position: center center;
    display: none;
    position: absolute;
    z-index: 100;
    width: 168px; 
    height: 128px;
}

.gallery a:hover .overlay {
    display: block;
}

HTML:

<div class="gallery">
    <a href="#">
        <div class="overlay"></div><img src="img1" />
    </a>
    <a href="#">
        <div class="overlay"></div><img src="img2" />
    </a>
</div>

Here is working sample: http://jsfiddle.net/7Mqer/2/

Then if you want animation, you can add some JS. Below is example.

Changes in CSS:

.gallery a .overlay {
    /*display: none;*/
    opacity: 0;
}

JS:

$('.gallery a .overlay').hover(
    function() {
        $(this).stop().animate({opacity:1.0});        
    },
    function(){
        $(this).stop().animate({opacity:0});
    }
);

Working sample: http://jsfiddle.net/7Mqer/1/