CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
MariusNV
MariusNV

Reputation: 320

What to use as hover effect for an image?

I want to achieve the following hover effect on my portfolio elements - link with before and after.

I am using Bootstrap with Masonry so the HTML for the original image is looking like that:

<div class="col-md-4 col-sm-6 item">
    <img src="img/portfolio3.jpg">
</div>

I can use jQuery .hover() function to swap the image source and also I was thinking for the heading and button to have the two elements hidden before the hover event like following:

HTML

<div class="col-md-4 col-sm-6 item">
    <img src="img/portfolio3.jpg">
    <div class="captions">
        <h3>AncaGV Blog</h3>
        <button></button>
    </div>  
</div>

jQuery

$('.item img').hover(function(){
    $(this).attr('src','portfolio3b.jpg');
    $(this).next().slideToggle('slow');
});

Please note that I've just write the code here, haven't tested yet because I want to ask if there is a possibility to use CSS for the shadow effect instead of swaping the image sources.

Also, if someone could suggest maybe a better aproach regarding the heading and the button I would be more than glad to try it out. For now I am thinking to hide the div and position it over the bottom of the image.

Upvotes: 2

Views: 144

Answers (2)

stormec56
stormec56

Reputation: 162

Go with :hover. If anything can be done by CSS, don't turn to JavaScript.

For example: 

img {
    background: url("img.png");
}

Ideally, you should use CSS sprites for icons, flags and/or any "smaller images", by setting the background-position.

More on CSS Sprites.

Upvotes: 3

roberrrt-s
roberrrt-s

Reputation: 8210

Pure CSS way of solving the hidden captions:

.item img + div {
    display: none;
}

.item img:hover + div {
    display: block;
}

.item:hover img + div {
    display: block;
}

Codepen example

Changing the source of the image would be something like:

HTML:

<div class="col-md-4 col-sm-6 item">
    <div id="portfolio-item-3"></div>
    <div class="captions">
        <h3>AncaGV Blog</h3>
        <button>Hi!</button>
    </div>  
</div>

CSS:

#portfolio-item-1 {
    background-image: url('img.png');
}
#portfolio-item-1:hover {
    background-image: url('img-hover.png');
}

Upvotes: 3

Related Questions