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/