JSFiddle - React, Tailwind, and code Playground

by Ian Roberts

HTML

<script src="http://www.queness.com/resources/html/caption/js/jquery.easing.1.3.js"></script>
<div class="photo">
    <div class="heading"><span>Telephoto Lens</span></div>
    <img src="http://placehold.it/350x233" width="350" height="233" alt="" />
    <div class="caption"><span>A lens for photographing distant objects; it is designed in a compact manner so that the distance from the front of the lens to the film plane is less than the focal length of the lens. </span></div>
</div>

CSS

*{
font-family:arial;
font-weight:bold;    
}
.photo {
        position:relative;  
        overflow:hidden;
        width:350px;
        height:233px;
    }    
        .photo .heading, .photo .caption {
            position:absolute;
            background:#000;
            height:50px;
            width:350px;
            opacity:0.6;
        }
     /* positioning heading & caption out of the way */
        .photo .heading { 
            top:-50px;
        }
        .photo .caption {         
            bottom:-50px;        
        }
     /* styles hovering items */
        .photo .heading span {
            color:#26c3e5;          
            display:block;
            padding:5px 0 0 10px;
        }
        .photo .caption span{
            color:#999;    
            font-size:9px;
            display:block;
            padding:5px 10px 0 10px;
        }

JavaScript

// animate titles
//needs JQ & JQ easing js
//
// transition effect
        style = 'easeOutQuart';

        // if the mouse hover the image
        $('.photo').hover(
            function() {
                //display heading and caption
                $(this).children('div:first').stop(false,true).animate({top:0},{duration:200, easing: style});
                $(this).children('div:last').stop(false,true).animate({bottom:0},{duration:200, easing: style});
            },

            function() {
                //hide heading and caption
                $(this).children('div:first').stop(false,true).animate({top:-50},{duration:200, easing: style});
                $(this).children('div:last').stop(false,true).animate({bottom:-50},{duration:200, easing: style});
            }
        );