Sometimes, we want to change source of the img element on hover wirh CSS.
In this article, we’ll look at how to change source of the img element on hover wirh CSS.
How to change source of the img element on hover wirh CSS?
To change source of the img element on hover wirh CSS, we set the background image of the a non-img element.
For instance, we write
div {
background: url("http://dummyimage.com/100x100/000/fff");
}
div:hover {
background: url("http://dummyimage.com/100x100/eb00eb/fff");
}
to set the background property to the url for the div and a different one when we hover over it.
Conclusion
To change source of the img element on hover wirh CSS, we set the background image of the a non-img element.
