Highlight an image by changing the opacity

I have a set of images. Whenever i hover over one i want it to be highlighted by reducing the opacity of the other images. So the image which have the cursor over it will keep its color. I tried it with the below code but it didn't work. What am i doing wrong?

HTML:

<div id="first">
<img id="image1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image2" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image3" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image4" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image5" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image6" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image7" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image8" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image9" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image10"src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
</div>

CSS:

#first:hover img
{                            /* PARENT HOVER */
    opacity:0.4;
    cursor: pointer;                    /* Dim all */
}
#first img:hover
{                            /* SINGLE HOVER */
    opacity: 1;                /* Max one */
    color:#000000;
    cursor: pointer;
}

You can do it through jQuery. Jquery is required for the below code.

<script>
    jQuery(function($) {
        $('#first img').hover(function() { // on mouseover
            $('#first img').css({'opacity':0.4}); // you can animate this as well
            $(this).css({'opacity':1});
        }, function() { // on mouseout
            $('#first img').css({'opacity':1});
        });
    });
</script>
我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章