CSS3 Fadein/Fadeout Hover vs Jquery Fadein/Fadeout Hover

CSS3 Fadein Hover

html:

<ul>
<li>img
 <div>
 <span>put a desc here</span>
 </div>
</li>
<li>img
 <div>
 <span>put a desc here</span>
 </div>
</li>
<li>img
 <div>
 <span>put a desc here</span>
 </div>
</li>
</ul>

css:

 ul li {
 display:inline-block;
 margin-left:20px;
 opacity:1;
 border: 10px solid #fff;
 position: relative;
 -webkit-transition: opacity .25s ease-in-out;
 -moz-transition: opacity .25s ease-in-out;
 -ms-transition: opacity .25s ease-in-out;
 -o-transition: opacity .25s ease-in-out;
 transition: opacity .25s ease-in-out;
 -moz-box-shadow: 3px 3px 5px 6px #ccc;
 -webkit-box-shadow: 3px 3px 5px 6px #ccc;
 box-shadow: 3px 3px 5px 6px #ccc;
}
ul li, ul li div {
 height: 100px;
 width: 100px;
 background: #999;
 text-align: center;
 -moz-border-radius: 100px;
 -webkit-border-radius: 100px;
 border-radius: 100px;
}
 ul li div {
 position:absolute;
 background: #000;
 color: #fff;
 top:0;
 left:0;
 opacity: 0;
 -webkit-transition: opacity .25s ease-in-out;
 -moz-transition: opacity .25s ease-in-out;
 -ms-transition: opacity .25s ease-in-out;
 -o-transition: opacity .25s ease-in-out;
 transition: opacity .25s ease-in-out;
 } 
 ul li div:hover {
 opacity: 1;
 -webkit-transition: opacity .25s ease-in-out;
 -moz-transition: opacity .25s ease-in-out;
 -ms-transition: opacity .25s ease-in-out;
 -o-transition: opacity .25s ease-in-out;
 transition: opacity .25s ease-in-out;
 }
 ul li div span {
 position: relative;
 top: 30px;
 }

DEMO
http://jsfiddle.net/itsduc/LEZcf/

Jquery Fadein Hover

html:

<ul>
<li>img
 <div>
 <span>put a desc here</span>
 </div>
</li>
<li>img
 <div>
 <span>put a desc here</span>
 </div>
</li>
<li>img
 <div>
 <span>put a desc here</span>
 </div>
</li>

</ul>

css:

ul li {
display:inline-block;
margin-left:20px;
border: 10px solid #fff;
position: relative;
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
ul li, ul li div {
height: 100px;
width: 100px;
background: #999;
text-align: center;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
 ul li div {
position:absolute;
background: #000;
color: #fff;
top:0;
left:0;
display: none;
 } 

 ul li div span {
 position: relative;
 top: 30px;
 }

Jquery

$('ul li').hover(function() {
$(this).find('div').fadeIn();
}, function() {
$(this).find('div').fadeOut();
});

DEMO
http://jsfiddle.net/itsduc/nAyBa/

Related protips

Have a fresh tip? Share with Coderwall community!