JSFiddle - React, Tailwind, and code Playground

by malamine_kebe

HTML

<br><br>
<div class="frame">
	<div class="content"></div>
	<img src="http://www.software-ds.com/DBZ/dbz/galerie-dbz-13/dbz-258.jpg" class="imageMini"><div class="blabla">bla bla bla bla bla</div>
	<div class="content2"></div>
</div>

CSS

.frame{
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color: #FFFFFF;
	-webkit-box-shadow: 1px 2px 2px #91999d;
	-moz-box-shadow: 1px 2px 2px #91999d;
	box-shadow: 1px 2px 2px #91999d;
	font-family:arial;
	font-size:10px;
	font-weight: bold;
	width:40%;
	position:relative;
}

.imageMini{
	-webkit-border-top-left-radius: 3px;
	-webkit-border-top-right-radius: 3px;
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-topright: 3px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	max-width: 100%;
	cursor:pointer;
}

.blabla{
	margin:10px;
	color:#999;
}

.content { 
	position:absolute;
	display:none;
	background-color: #FFFFFF;
	-webkit-box-shadow: 1px 0px 2px #91999d;
	-moz-box-shadow: 1px 0px 2px #91999d;
	box-shadow: 1px 0px 2px #91999d;
	font-family:arial;
	font-size:10px;
	font-weight: bold;
	color:#999;
	-webkit-border-top-left-radius: 3px;
	-webkit-border-top-right-radius: 3px;
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-topright: 3px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

.content2 { 
	position:absolute;
	display:none;
	background-color: #FFFFFF;
	-webkit-box-shadow: 1px 2px 2px #91999d;
	-moz-box-shadow: 1px 2px 2px #91999d;
	box-shadow: 1px 2px 2px #91999d;
	font-family:arial;
	font-size:10px;
	font-weight: bold;
	color:#999;
	-webkit-border-bottom-left-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
	-moz-border-radius-bottomleft: 3px;
	-moz-border-radius-bottomright: 3px;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

body{
	background-color:#e1e3e8;
}

JavaScript

$(document).on('mouseenter', '.frame', function() {
	var el = $(this);
	var elHeight = el.height();
	var elWidth = el.width();
	content = $(".content");
	content2 = $(".content2");
	content.css({"bottom":elHeight,"width":elWidth});
	content2.css({"top":elHeight,"width":elWidth});
	content.html('ok ok ok ok');
	content2.html('ok ok ok ok');
	el.css({
		"border-radius":"0px",
		"-moz-border-radius":"0px",
		"-webkit-border-radius":"0px"
	});
	el.children('.imageMini').css({
		"border-top-left-radius":"0px",
		"border-top-right-radius":"0px",
		"-moz-border-radius-topleft":"0px",
		"-moz-border-radius-topright":"0px",
		"-webkit-border-top-left-radius":"0px",
		"-webkit-border-top-right-radius":"0px"
	});
	content.stop(true, true).slideToggle(300);
	content2.stop(true, true).slideToggle(300);
}).on('mouseleave','.frame', function() {
	var el = $(this);
	content = $(".content");
	content2 = $(".content2");
	content.stop(true, true).slideToggle(300, function(){
		content.html('');
		el.css({
			"border-top-left-radius":"3px",
			"border-top-right-radius":"3px",
			"-moz-border-radius-topleft":"3px",
			"-moz-border-radius-topright":"3px",
			"-webkit-border-top-left-radius":"3px",
			"-webkit-border-top-right-radius":"3px"
		});
		el.children('.imageMini').css({
			"border-top-left-radius":"3px",
			"border-top-right-radius":"3px",
			"-moz-border-radius-topleft":"3px",
			"-moz-border-radius-topright":"3px",
			"-webkit-border-top-left-radius":"3px",
			"-webkit-border-top-right-radius":"3px"
		});
	});
	content2.stop(true, true).slideToggle(300, function(){
		content2.html('');
		el.css({
			"border-bottom-left-radius":"3px",
			"border-bottom-right-radius":"3px",
			"-moz-border-radius-bottomleft":"3px",
			"-moz-border-radius-bottomright":"3px",
			"-webkit-border-bottom-left-radius":"3px",
			"-webkit-border-bottom-right-radius":"3px"
		});
	});
});