JSFiddle - React, Tailwind, and code Playground

by Ali Khaled

HTML

<div id="a">
    <img class="icom_1" />
        <img class="home_hungry" src="http://lugmety.com/freefree/images/hungry.png" />    
</div>
    
<div id="b">
    <img class="icom_2" />
        <img class="bored_2" src="http://lugmety.com/freefree/images/bored.png" />     
</div>

<div id="c">
    <img class="icom_3" />
    <img class="takemehome_2" src="http://lugmety.com/freefree/images/takemehome.png" />
</div>

CSS

#a > img {
    display: inline-block;
      transition: opacity .3s ease-in-out;
                  -moz-transition: opacity .3s ease-in-out;
                  -webkit-transition: opacity .3s ease-in-out;
    
}


.icom_1 {      
width: 109px;
  height: 97px;
  float: left;
  margin: 0px 14px 0px 20px;
  background: url(http://lugmety.com/freefree/images/big-icon-1.png);  }

.icom_1:hover{
	background-position:0 -97px;
   
}

.icom_2 {      
width: 109px;
  height: 97px;
  float: left;
  margin: 0px 14px 0px -8px;
  background: url(http://lugmety.com/freefree/images/big-icon-2.png);  }

.icom_2:hover{
	background-position:0 -97px;
   
}

.icom_3 {      
width: 97px;
  height: 97px;
  float: left;
  margin: 0px 14px 0px -7px;
  background: url(http://lugmety.com/freefree/images/big-icon-3.png);  }

.icom_3:hover{
	background-position:0 -97px;
   
}

.home_hungry {
  position: absolute;
  width: 260;
  line-height: 127px;
  left: 57px;
  top: 144px;
    opacity: 0;
     transition: opacity .3s ease-in-out;
                  -moz-transition: opacity .3s ease-in-out;
                  -webkit-transition: opacity .3s ease-in-out;
               
}
.bored_2 {
  position: absolute;
  width: 260;
  line-height: 127px;
  left: 57px;
  top: 144px;
    opacity: 0;
     transition: opacity .3s ease-in-out;
                  -moz-transition: opacity .3s ease-in-out;
                  -webkit-transition: opacity .3s ease-in-out;
               
}
.takemehome_2 {
  position: absolute;
  width: 260;
  line-height: 127px;
  left: 57px;
  top: 144px;
    opacity: 0;
     transition: opacity .3s ease-in-out;
                  -moz-transition: opacity .3s ease-in-out;
                  -webkit-transition: opacity .3s ease-in-out;
               
}


#a:hover .home_hungry,
#b:hover .home_hungry,
#c:hover .home_hungry{
    opacity: .9;
                  transition: opacity .3s ease-in-out;
                  -moz-transition: opacity .3s ease-in-out;
                  -webkit-transition:...