JSFiddle - React, Tailwind, and code Playground

by acturbo

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> 
<head> 
<title></title> 
</head> 
<body> 

<div class="slide">
    <img id="img" src="http://dummyimage.com/250x200" alt="1" width="250" height="200" />
    <div class="snipit">
         <h4>Image 1</h4>
         <p>Some text.</p>
    </div>
</div>
    
    
</body>
</html>

CSS

img{
    border:1px solid yellow;   
    margin: 14px 0 0 0;
}

div.slide {
    width: 310px;
    height: 230px;
    float: left;
    border:1px solid red;
    text-align: center;
    position: relative;
    background: url(http://dummyimage.com/310x230) no-repeat top center;

}

/*div.slide div {*/
.snipit{
    width: 250px;
    height: 100px;
    padding: 0;
    display: none; 
    position: absolute;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.5);
    border:1px solid red;
    bottom: 14px;
    left:30px;
}

JavaScript

$(document).ready(function(){
   
    $(".slide").hover(function(){
        $(this).find("div.snipit").slideDown("slow");
        $(this).find("div h4").text("DOWN");
    },function(){
        $(this).find("div.snipit").slideUp("slow");    
        $(this).find("div h4").text("UP");
    });
 
    
});


$(function(){
	$("#img").hover(function(){
		var w = $(this).width();
        var h = $(this).height();
		$("#img").attr("width",w*1.2);
        $("#img").attr("height",h*1.2);
		//$("#zoomblock .he-zoom>img").attr("src",large);
	});
});