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();
});