CODEWITHSUNDEEP
cssimagesvgbackground
Nicholas Corin
Nicholas Corin

Reputation: 2404

SVG background underneath image

So what I'm trying to do is have an SVG overlay on an image on hover. Eventually I will animate it, but for now I'm just trying to get the overlay working. This is what I tried:

<div class="centering margin-on-top">
   <img id="img1" src="media/circle-1.jpg" />
   <img id="img2" src="media/circle-2.jpg" />
   <img id="img3" src="media/circle-3.jpg" />
</div>

CSS:

#img1:hover {
    background: url("../svg/stroke-ears.svg") no-repeat;
}

At first I thought it wasn't working at all. But then when I put the hover on the containing div instead and deleted the picture inside the "inspect element" window, the svg was there but hidden underneath the image.

Is there a way for me to maybe set a z-index on the image or the background?

Thanks in advance.

Upvotes: 0

Views: 1311

Answers (1)

Josh Burgess
Josh Burgess

Reputation: 9577

Change your CSS to this:

#img1 {
    position: relative;
}
#img1:hover:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("../svg/stroke-ears.svg") no-repeat;
}

What you're doing is creating a pseudo-element to overlay on top of the img. Your original img had the background applied to the background of the img as opposed to overlaying it.

This new solution creates an element outside the normal DOM that will treat your img as a container and cover the entirety of its dimensions with an element that has the original background you wanted applied.

Update

JSFiddle example

So, silly me, trying to treat imgs as containing elements. Here's the fix.

HTML

<div class="inline-container centering margin-on-top">
    <div class='img-holder'>
        <img id="img1" src="http://placehold.it/200x200" />
    </div>
    <div class='img-holder'>
        <img id="img2" src="http://placehold.it/200x200/FBC93D" />
    </div>
    <div class='img-holder'>
        <img id="img3" src="http://placehold.it/200x200/075883" />
    </div>
</div>

CSS

.inline-container {
    font-size: 0;
}
.img-holder {
    position: relative;
    display: inline-block;
}
.img-holder:hover:after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; right: 0; left: 0;
    background: url("http://placeskull.com/200/200") no-repeat;
}

You could easily swap the images to be background images on the new div, too, if you wanted to shorten up your HTML.

Upvotes: 1

Related Questions