JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="container">

<section class="imagebox">
    <img src="http://kuzya.com/_img/logo/logo.png" alt="Image 1.">
    <div class="slidingbox" id="slidingbox1">
        <h3>Image 1</h3>
        <p>Lorem ipsum dolor sit amet, consectur amet sit dolor ipsum lorem.</p>
    </div>
</section>


<section class="imagebox" id="imagebox2">
    
    <img src="http://kuzya.com/_img/logo/logo.png" alt="Image 2.">
    
    <div class="slidingbox" id="slidingbox2">
        <h3>Image 2</h3>
        <p>Lorem ipsum dolor sit amet, consectur amet sit dolor ipsum lorem.</p>
    </div>
    
</section>


<section class="imagebox" id="imagebox3">
    
    <img src="http://kuzya.com/_img/logo/logo.png" alt="Image 3.">
    
    <div class="slidingbox" id="slidingbox3">
        <h3>Image 3</h3>
        <p>Lorem ipsum dolor sit amet, consectur amet sit dolor ipsum lorem.</p>
    </div>
    
</section>

</div>

CSS

#container {
width: 100%;
margin: 0 auto;
margin-top: 15px;
}

/*=========================================
    Imagebox
=========================================*/

.imagebox {
-webkit-box-shadow: 0px 0px 3px 3px #aaaaaa;
-moz-box-shadow: 0px 0px 3px 3px #aaaaaa;
box-shadow: 0px 0px 3px 3px #aaaaaa;

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;

overflow: hidden;
position: relative;
z-index: 1;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 160px;
height: 160px;
}

.imagebox img {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
overflow: hidden;
}

/*=========================================
    Sliding box
=========================================*/

.slidingbox {
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
position: relative;
z-index: 2;
margin-top: -7px;
width: 160px;
height: 160px;
padding: 10px;
background: rgba(33,33,33,0.7);
color: #ffffff;
}

.slidingbox h3 {
font-size: 24px;
}

.slidingbox p {
font-size: 16px;
}

/*=========================================
    Sliding box 3
=========================================*/
#slidingbox3 {
margin-top:-607px;
}

/*=========================================
    Hover states
=========================================*/

#imagebox1:hover #slidingbox1 {
margin-top: -307px;
}

#imagebox2:hover #slidingbox2 {
margin-top: -154px;
}

#imagebox3:hover #slidingbox3 {
margin-top: -167px;
}