JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
</head>
<body>
  <html>
<head>
</head>
<body>
    <div class="marco">
        <img src="http://farm8.staticflickr.com/7207/6917838169_5e2004da39_m.jpg">
        <div class="infoImg"><p>Image 1 this is a tree</p></div>
    </div>
    <div class="marco">
        <img src="http://farm8.staticflickr.com/7098/7262873114_319ccc5b47_m.jpg">
        <div class="infoImg"><p>Image 2 this is a cloud</p></div>
    </div>
    <div class="marco">
        <img src="http://farm9.staticflickr.com/8164/7610535900_c9e9821725_m.jpg">
        <div class="infoImg"><p>Image 3 this is a... </br>bug?</p></div>
    </div>
</body>
</html>

CSS

body {
    text-align: center;
}
.marco{
    height: 160px;
    overflow: hidden;
    margin: 5px auto;
    position: relative;
    width: 220px;
}
img {
    positon: absolute;
}

.marco:hover .infoImg p, .marco:hover .infoImg{
    border: none;
    display: block;
    -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
}

.infoImg{
    background-color: rgba(155, 224, 65, .5);
    border-top: 10px solid rgba(155, 224, 65, .5);
    bottom: 0;
    margin: 0 auto;
    position: absolute;
    font: lighter .8em "Tahoma", arial;
    width: 100%;
    -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
}

.infoImg p {
    display: none;
    padding: 3px;
}