css class/property inactive after applying css method in jQuery

Question

I have an html object which is something like a card. Here is my code:

<a class="card" href="/subjects/electronics.html" >
    <div class="card_img" id="img_electronics"></div>
    <h4>Electronics</h4>
    <p class="card_description">Description</p>
    <div class="line"></div>
    <h5>GET STARTED</h5>
</a>

and my CSS:

.card_img{
    width: 350px;
    height: 200px;
    background-size: 350px 200px;
}

#img_electronics{
    background-image: url(/images/electronics.jpg);
}

The reason I specify the source of the image in the css is because I want to use a hover effect that creates color overlay on the image. I have many cards with different image sources, so I use JS for the effect:

$(document).ready( function() {
    $('.card').hover( 
        function(){
            pic = $(this).find("[id^='img_']");
            read_img_url = pic.css("background-image");
            val_img_url = read_img_url.replace(/["']/g, "");

            $(pic).css("background", "linear-gradient(rgba(255,255,255, 0.3),rgba(255,255,255, 0.3)), " + val_img_url);
            $(this).toggleClass('card_hover');
            $(this).find('h5').toggleClass('h5_hover');
        },

        function(){
            $(pic).removeProp("background");
            $(pic).css("background-image", val_img_url);
            $(pic).addClass('card_img');
            $(this).toggleClass('card_hover');
            $(this).find('h5').toggleClass('h5_hover');
        });

    });

At the beginning every image is displayed properly. However, after the first hover, the size of the image on the page remains the same, but only a small part of the actual image is there. The color overlay on hover works, though.

I tried setting background: linear-gradient(rgba(255,255,255,0.0),rgba(255,255,255,0.0)), url(/images/electronics.jpg); instead of background-image, but jQuery reads the property as empty string. Any suggestions how to keep my whole image after hover?

Answer 1

I think your current approach have problem because you use both gradient and image to "background" property.

You should use a mask to perform color overlay the image. Something like:

CSS:

.view {
        width: 350px;
        height: 200px;
        float: left;
        border: 10px solid #fff;
        overflow: hidden;
        position: relative;
        text-align: center;
    }

    .mask {
        width: 350px;
        height: 200px;
        position: absolute;
        overflow: hidden;
        top: 0;
        left: 0;
        opacity: 0;
        background: linear-gradient(rgba(255,255,255, 0.3),rgba(255,255,255, 0.3));
    }
    .view:hover .mask { 
        opacity: 1;
    }
    .view img {
        display: block;
        position: relative
    }

HTML:

<a class="card" href="/subjects/electronics.html" >
    <div class="view">
        <img src="/images/electronics.jpg" />  
        <div class="mask">
        <h4>Electronics</h4>
        <p class="card_description">Description</p>
        <div class="line"></div>
        <h5>GET STARTED</h5>
    </div>
</a>

This approach use only CSS, you don't need Javascript to perform color overlay an image, I think it can boost your performance also.

Here is a resource with full demos and source code about color overlay: http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/

I hope this help.