Search code examples
csshoverbackground-image

background image auto scale

I want an Image to disappear and another to appear at the same place with same size on hover. Therefor I hide the orignal image and create a background image instead. The problem: The background image does not auto scale. If I dont set a specific height it has no height (means no image visible).

enter image description here You can see the problem here if you scroll down a bit: https://www.ergotopia.de/

My current CSS:

.bestsellerkissen:hover .hoverkissen{
    background: url(example.jpg) no-repeat center;
    height: 240px;
    background-size: 100% 100%;
    display: block;
    border-radius: 4px 4px 0 0;
}
.bestsellerkissen:hover img{display:none;}
Solution

  • Use opacity instead of display on image. Then you don't need to set height:

    .bestsellerkissen:hover .hoverkissen{
    background: url(example.jpg) no-repeat center;
    background-size: 100% 100%;
    display: block;
    border-radius: 4px 4px 0 0;
}
.bestsellerkissen:hover img{
    opacity: 0;
}