JSFiddle - React, Tailwind, and code Playground

by btevfik

HTML

<div>
    <img id="b-image" src="http://sim02.in.com/55353dc77061aafd96466f2dff1dd3f1_ft_xl.jpg" />
    <div id="b-image-info">
        Stuff about the picture <a href="#">Click here to learn more</a>
    </div>
</div>

CSS

div {
    height: 450px;
    margin: 10px auto;
}

#b-image {
	display: inline-block;
	float: right;
	position: absolute;
	top: 0px;
	width: 50%;
	max-height: 500px;
	margin-bottom: px;
} 


#b-image-info {
	display: none;
}

#b-image-info {
	position: absolute;
	top: 350px;
    left: 0%;
	background-color: lightyellow;
	width: 50%;
	height: auto;
	margin: 0px;
	padding: 10px;
	z-index: 200;
}

#b-image-info a {
	cursor: pointer;
	color: blue;
	text-decoration: none;
}

JavaScript

$("#b-image").hover(function(){
   $("#b-image-info").css("display", "block");
}, function(){
    //nothing
});

$("#b-image-info").hover(function(){
    //nothing
}, function(){
    $("#b-image-info").css("display", "none");
});