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/