Clever Geek Handbook

When the image in the div changes on hover, the image is cropped

I'm trying to change the image when the user hovers over it, but the method I used is kind of slicing off the image without showing it all. How can I scale the image to the size I specify, instead of just making the div the size and cutting off the rest?

HTML:

<div class="navbar-image" id="navbar-image-ID2Games">
</div>

CSS

#navbar-image-ID2Games { 
    width: 5rem; 
    height: 5rem; 
    background-repeat: no-repeat;
    background: url(http://i.imgur.com/Ou5cX4D.png); 
} 

#navbar-image-ID2Games:hover { 
    width: 5rem; 
    height: 5rem; 
    background: url(http://i.imgur.com/Tx0SVZr.png) no-repeat; 
}

See it here: https://jsfiddle.net/7a7ghfw4/

As you can see from the imgur url, the image should be a save icon, but it strips off everything except the top left.

+3


source to share


2 answers


Add "background-size: contain" to both CSS rules.



#navbar-image-ID2Games { 
    width: 5rem; 
    height: 5rem; 
    background-repeat: no-repeat;
    background: url(http://i.imgur.com/Ou5cX4D.png);
    background-size: contain;
} 

#navbar-image-ID2Games:hover { 
    width: 5rem; 
    height: 5rem; 
    background: url(http://i.imgur.com/Tx0SVZr.png) no-repeat;
    background-size: contain;
}
+2


source


It works:

#navbar-image-ID2Games { 
    width: 265px; 
    height: 265px; 
    background-repeat: no-repeat;
    background: url(http://i.imgur.com/Ou5cX4D.png); 
} 

#navbar-image-ID2Games:hover { 
    width: 265px; 
    height: 265px; 
    background: url(http://i.imgur.com/Tx0SVZr.png) no-repeat; 
}


I only changed the width and height for both classes

0


source






More articles:


All Articles