JSFiddle - React, Tailwind, and code Playground

by Derek Wood

HTML

<h1>Things</h1>

<ul class='thing-list'>

  <li class='thing' data-source='https://unsplash.it/3000'>
    <a class='link image-w' href='#'>
      <img src='https://placehold.it/300' alt='Image name'>
      <h2 class='title'>thing 1</h2>
    </a>
  </li>
  
  <li class='thing' data-source='https://unsplash.it/3100'>
    <a class='link image-w' href='#'>
      <img src='https://placehold.it/300' alt='Image name'>
      <h2 class='title'>thing 2</h2>
    </a>
  </li>

  <li class='thing' data-source='https://unsplash.it/3200'>
    <a class='link image-w' href='#'>
      <img src='https://placehold.it/300' alt='Image name'>
      <h2 class='title'>thing 3</h2>
    </a>
  </li>

</ul>

CSS

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.image-w img {
  display: block;
  width: 100%;
  height: auto;
}

.thing-list .thing {
  background: lightgreen;
  position: relative;
  max-width: 100px;
  display: inline-block; // for now
}

.thing-list .link {
  display: block;
}

.thing-list img {
  opacity: 0;
}

.thing-list .title {
  position: absolute;
  top: 1rem;
  left: 1rem;
}

body {
  padding: 1rem;
}

h1 {
  margin-bottom: 1rem;
}

.thing-list .loaded img {
  opacity: 0;
  transition: .2s;
}

.thing-list .loaded:hover img {
  opacity: 1;
}

JavaScript

console.clear();

$('.thing').hover( function() {
  var $thisThing = $(this);
	var thisSource = $thisThing.data('source'); // get the real image url
  var $thisImage = $thisThing.find('img'); // cache the node for the img
  $thisImage.attr('src', thisSource); // add the src attr of the real url
  $thisImage.one('load', function() { // after a load...
  	$thisThing.addClass('loaded');
  });
});