<div style='display: flex; justify-content: center;'>
<a href="#">
<img src="https://www.nps.gov/common/uploads/stories/images/nri/20160426/articles/5097608B-1DD8-B71B-0BB1933DB95CC94C/5097608B-1DD8-B71B-0BB1933DB95CC94C.jpg" class="pics" data-alt-src="https://www.nps.gov/common/uploads/stories/images/nri/20151216/articles/C6E16F5A-1DD8-B71B-0BAB45B9358DD9C8/C6E16F5A-1DD8-B71B-0BAB45B9358DD9C8.jpg" alt="city vs. nature">
</a>
</div>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
$(document).ready(function(){
let img = $('img'),
src = img.attr("src"),
altSrc = img.attr("data-alt-src");
img.css({
"width": img.width(),
"height": img.height(),
"display": "block",
"background": "url("+src+")",
"transition": "all 0.6s ease-in-out"
})
img.attr("src", "");
img.attr("alt", "");
img
.mouseenter(()=>{
img.css({
"background": "url("+altSrc+")",
})
})
.mouseleave(()=>{
img.css({
"background": "url("+src+")",
})
})
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.