Skip to main content
Main Content

How Do You Code Hover Over An Image?

How Do You Code Hover Over An Image?
Posted 2021-08-01 18:58:01 (edited)
#500576

Right Now I'm Trying To Code Hovering In My Den With CSS, (Where You Hover Over An Image And That Image Changes.) But I Don't Know How To Do It In The First Place. So I'm Just Wondering How Do I Do That?
𝚂𝚠𝚎𝚊𝚝𝚢𝚁𝚘𝚋𝚘𝚝
#46178
Posted 2021-08-14 19:42:51
#506440
If you're just using an image, you can use content property in a div and then a hover selector and just change the content. For example:

.ChangingImage {
content: url(https://img.wolvden.com/f/0f/fa/58/0ffa5845630dbc3e8e81242964254f3979fbe2d2.1670478.1628919403.png);
}

.ChangingImage:hover {
content: url(https://img.wolvden.com/f/73/7f/0c/737f0c37a6c2be8868cdbc5b1b867b869056e518.1742706.1628919404.png);
}

This would have the content of the div be one of my wolves, and when hovered, it would change to a different wolf. It might look a bit silly (or hover awkwardly) if the images are different sizes, though, so just keep that in mind. If you wanted text as well, you would change content to background-image like such:

background-image: url(https://img.wolvden.com/f/0f/fa/58/0ffa5845630dbc3e8e81242964254f3979fbe2d2.1670478.1628919403.png);

And you can add more to the div, of course, like centering the text, etc.
fireflii
#757
Search Topic