JSFiddle - React, Tailwind, and code Playground

by sjmcpherson

HTML

<div id="social_icons"><h2>Hover me</h2></div>

CSS

#social_icons {
    display: inline-block;
    background: url(http://www.gobothell.com/wp-content/uploads/2012/01/FB-and-Twitter-icons-300x181.jpg) no-repeat center center;
    background-position: 0px 0px;
    width: 150px;
    height: 175px;
    border: 1.5px solid blue;
    margin: 10px;

}
#social_icons:before {
  display:inline-block;
     position:absolute;
    opacity:0;
    background: url(http://www.gobothell.com/wp-content/uploads/2012/01/FB-and-Twitter-icons-300x181.jpg) no-repeat center center;
    background-position: -150px 0px;
    width: 150px;
    height: 175px;
    content:"";
    transition:opacity 0.5s ease;
    border: 1.5px solid blue;
}
#social_icons:hover:before {
    opacity:1;
}