JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div class="js-hover-change" data-hover-replace="http://s3.amazonaws.com/thecharles2.0/uploads/birdwatch/TC15_Pushitlive_peace4.jpg">
  <img class="inspiration-thumbnail js-birdwatch-grid-image" src="http://s3.amazonaws.com/thecharles2.0/uploads/birdwatch/TC15_Pushitlive_OneFineDay.jpg">  
</div>

CSS

.js-hover-change{
  position: relative;
  width: 300px;
}
img{
  width: 100%;
  margin: 0;
}
.hover-change{
  position: absolute;
  top: 0;
  width: 100%;
  opacity: 0;
}
.js-hover-change:hover .hover-change{
  opacity: 1;
}

JavaScript

$(".js-hover-change").each(function(){
	init($(this))
});

function init(element){
	var changeURL = element.data("hover-replace");
  var frag = $("<div></div>");
  element.append("<img class='hover-change' src='"+changeURL+"' />");
}
function hover(){

}
function unhover(){

}