JSFiddle - React, Tailwind, and code Playground

HTML

<div class='A'>
    <div class='image' id='img1'></div>
</div>
div tag with background


<div class='B'>
    <img src='http://www.kfc.com.au/about-us/images/newsBucketImg.jpg'/>
</div>
img tag with background

CSS

.image {
    width: 300px;
    height: 300px;
}

.A .image#img1 {
    background: url('http://www.kfc.com.au/about-us/images/newsBucketImg.jpg') no-repeat;
}

.A .image#img1:hover {
    background: url('http://livingyourpassion.files.wordpress.com/2009/08/kfc-bucket-of-chicken.gif?w=600') no-repeat;
}

.B img:hover {
    background: url('http://livingyourpassion.files.wordpress.com/2009/08/kfc-bucket-of-chicken.gif?w=600'); }