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="home_hungry" src="http://lugmety.com/freefree/images/bored.png" />
</div>
<div id="c">
<img class="icom_3" />
<img class="home_hungry" src="http://lugmety.com/freefree/images/takemehome.png" />
</div>
<img class="home_hungry logo" src="http://lugmety.com/freefree/images/logo.png" />
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 20px;
background: url(http://lugmety.com/freefree/images/big-icon-2.png); }
.icom_2:hover{
background-position:0 -97px;
}
.icom_3 {
width: 109px;
height: 97px;
float: left;
margin: 0px 14px 0px 20px;
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;
}
#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: opacity .3s ease-in-out;
}
.home_hungry.logo{
display:inline-block;
opacity: .5;
}