JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div>
Example 1 - pure css:
</div>
<div class='box box1'>
  <label>
    label
  </label>
</div>

<hr/>

<div>
Example 2 - jquery + css:
</div>

<div class='box box2'>
hover
</div>

<div class='box box2 transition visible'>
  second-box
</div>

CSS

.hidden {
  opacity: 0;
  transition: opacity 0.2s linear;
}
.visible {
  opacity: 1;
  transition: opacity 0.2s linear;
}
.box {
  width: 100px;
  height: 100px;
  background-color: tomato;
  margin: 10px;
}
.box1 label {
  transition: opacity 0.2s linear;
}
.box1:hover label {
  opacity: 0;
  transition: opacity 0.2s linear;
}

JavaScript

$(function() {
	$('.box2').on('mouseover', function() {
  	$('.transition').toggleClass('hidden');
    $('.transition').toggleClass('visible');
  }).on('mouseleave', function() {
  	$('.transition').toggleClass('hidden');
    $('.transition').toggleClass('visible');
  });
});