JSFiddle - React, Tailwind, and code Playground
HTML
<div class="copy">Hello World</div>
CSS
.copy {
background: whitesmoke;
display: block;
line-height: 1;
padding: 12px;
color: #b0d66d;
font-weight: 200;
letter-spacing: .08em;
opacity: 0;
/*-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
-o-transition: opacity 1s ease;
transition: opacity 1s ease;*/
}
.copy:hover {
/*opacity: 1;*/
}
JavaScript
$(".copy").hover(function(){
$(this).stop().animate({
opacity: '1'
}, 200, function() {
// Animation complete.
});
}, function(){
$(this).stop().animate({
opacity: '0.1'
}, 200, function() {
// Animation complete.
});;
});