Search code examples
htmlcsshover

I have an image link on my website that changes upon hovering my mouse over it, how do i turn both images into a link?

My website uses an image as a link to another page, and I decided to make the image change upon hovering my mouse over it for some extra flair. I found a way to do it, but I found out that the hover image doesn't link to anywhere, it's just a static image. I'm not that good at CSS at all, so I'm completely at a loss on how to fix this.

this is the current code I'm using (I included both the CSS and the HTML, I hope that's okay.)

.avatar {
    border: 1px solid #000;
    width: 170px;
    height: 170px;
    margin-bottom: 12px;
    background-image: url('https://radiationcat.neocities.org/f880349c84b78fc62ff089d46cbafef2.jpg') 
}
.avatar:hover {
content: url('https://file.garden/ZRo4aD_G0TetIeK6/me2.png');
    height: 170px;
    width: 170px;
}

<div class="avatar"><a href="gallery.html"><img src="https://file.garden/ZRo4aD_G0TetIeK6/me.png"></a></div>

Solution

  • content css property works on img nodes, so you have to alter css for the img, not the avatar div.

    Try this css:

    .avatar {
    border: 1px solid #000;
    margin-bottom: 12px;
    width: 170px;
    height: 170px;
}
.avatar a img {
    width: 100%;
    height: 100%;
}
.avatar:hover a img {
    content: url('https://file.garden/ZRo4aD_G0TetIeK6/me2.png');
}

    Hope that helps