<div style='display: flex; justify-content: center;'>
<a class='rollover' href="#"></a>
</div>
.rollover {
display: block;
width: 400px;
height: 300px;
background: url(https://www.nps.gov/common/uploads/stories/images/nri/20160426/articles/5097608B-1DD8-B71B-0BB1933DB95CC94C/5097608B-1DD8-B71B-0BB1933DB95CC94C.jpg) no-repeat;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
.rollover:hover {
background: url(https://www.nps.gov/common/uploads/stories/images/nri/20151216/articles/C6E16F5A-1DD8-B71B-0BAB45B9358DD9C8/C6E16F5A-1DD8-B71B-0BAB45B9358DD9C8.jpg)
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.