JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ex3">
    <div> 
        <img src="http://www.diack.co.za/best/instagram.png" />
        <p>Instagram</p>
    </div>      
</div>

CSS

#ex3 { width: 300px; 
    height: 156px; 
    line-height: 0px; 
    color: transparent; 
    font-size: 20px; 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-weight: 100; 
    text-transform: uppercase; 
}

#ex3 div:hover { 
    line-height: 0px; 
    background: #363636;
    color: #000000; 
}

p {
    text-align: center;
}

#ex3 div{ 
    float: left; 
    margin: 0 15px; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
}


#ex3 div:nth-of-type(2){ 
    margin-top: 50px;
}

#ex3 div:nth-of-type(3){ 
    margin-top: 100px;
}

#ex3 div:nth-of-type(4){ 
    margin-top: 150px;
}