JSFiddle - React, Tailwind, and code Playground

by vishal pandey

HTML

<div class="open-project-link">
    <a id="hover-01" class="open-project"  
   href="project3.html">Bowman Clay</a>
    </div>


<div class="responsive-section-image" id="hover-change" 
 style="background-image: url('http://media1.santabanta.com/full5/Nature/Flowers/flowers-166a.jpg');">
  <div class="overlay"></div>
                         </div>

CSS

#hover-change{
  background-color:red;
  height:500px;
  width:500px;
}

JavaScript

$('#hover-01').on('mouseenter', function(){
   $('#hover-change').css('background-image', 'url("http://media1.santabanta.com/full5/Nature/Flowers/flowers-164a.jpg")');
});
$('#hover-01').on('mouseout', function(){
  $('#hover-change').css('background-image', 'url("http://media1.santabanta.com/full5/Nature/Flowers/flowers-160v.jpg")');
});