JSFiddle - React, Tailwind, and code Playground

by vamsi velaga

HTML

<div id="container" class="relative">
  <div class="like absolute"><a href="#"><img src="http://www.simplemailerresponsive.bugs3.com/images/like.png" width="32" height="32" alt="Like" /></a></div>
  <div class="balloons absolute"> <a href="#"><img src="http://www.simplemailerresponsive.bugs3.com/images/love_symbol.png" width="24" height="24" alt="Symbol" /></a> </div>
</div>

CSS

body {
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 20px 0 0 20px;
}
* {
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;
}
.relative {
	position: relative;
}
.absolute {
	position: absolute;
}
#container {
	width: 100%;
	float: left;
}
.like {
	float: left;
	top: 100px;
}
.like a img {
	border: none;
	float: left;
	cursor: pointer;
	top: 0px;
}
.balloons {
	float: left;
	top: 80px;
}
.balloons a img {
	opacity: 0;
	border: none;
	/*--transition: ease 0.5s;--*/
	transform: translateY(0);
	-moz-transform: translateY(0);
}
/*--#container > .like:hover ~ .balloons a img {
 /*--opacity: 1;--
 animation-name: anima;
 animation-duration: 0.5s;
 animation-iteration-count: 1;
 animation-timing-function: ease;
}--*/
.anima {
 animation-name: anima;
 animation-duration: 0.5s;
 animation-iteration-count: 1;
 animation-timing-function: ease;
 -moz-animation-name: anima;
 -moz-animation-duration: 0.5s;
 -moz-animation-iteration-count: 1;
 -moz-animation-timing-function: ease;
 -webkit-animation-name: anima;
 -webkit-animation-duration: 0.5s;
 -webkit-animation-iteration-count: 1;
 -webkit-animation-timing-function: ease;
}

@keyframes anima{
	0%{
		transform: translateY(0);
		opacity:0}
	10%{transform: translateY(0);
		opacity:1}
	100%{
		transform: translateY(-30px);;
		opacity: 0;}
	}
@-moz-keyframes anima{
	0%{
		transform: translateY(0);
		opacity:0}
	10%{transform: translateY(0);
		opacity:1}
	100%{
		transform: translateY(-30px);;
		opacity: 0;}
	}
@-webkit-keyframes anima{
	0%{
		transform: translateY(0);
		opacity:0}
	10%{transform: translateY(0);
		opacity:1}
	100%{
		transform: translateY(-30px);;
		opacity: 0;}
	}

JavaScript

$(document).ready(function(){
	$("#container .like a img").click(function(){
		$("#container .balloons a img").addClass("anima");
		});
	});