<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+")",
    })
   })
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.