$('#box').find('.some-class-for-div').each(function (){
$(this).data('op',$(this).css('opacity'));
})
.mouseover(function (){
$(this).animate({opacity: 1}, 500 );
})
.mouseout(function (){
$(this).stop(true,true).animate({opacity: $(this).data('op')}, 500 );
});<div id="box">
<div id="des1" class="some-class-for-div">1<img src="imgs/about1.png" id="about1" style="opacity: 0;"></div>
<div id="des2" class="some-class-for-div">2<img src="imgs/about2.png" id="about2" style="opacity: 0;"></div>
<div id="des3" class="some-class-for-div">3<img src="imgs/about3.png" id="about3" style="opacity: 0;"></div>
</div>.block{
overflow-x:hidden;
width:300px;
float:left;
}
.block:after{
clear:both;
display:table;
content:'';
}
.block img{
height:100%;
}<div class="block">
<img scr="/fsfsd/img.png" />
</div>.container {
width: 876px;
margin:0 auto;
<i>display:flex </i>
}
.box {
<i>flex-flow: column nowrap;</i>
width: 250px;
margin: 20px;
text-align: center;
float:left;
background-color: #f8f8f8;
border-width: 1px 1px 2px;
border-style: solid;
border-color: #F0F0F0 #F0F0F0 #CCC;
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image: none;
border-radius: 5px;
}<script type="text/javascript">
$(document).ready(function(){
var len = $('div#test').length;
//alert(len);
for (var i = 0; i<= len; i++){
if (i<=2){
$('div#test').eq(i).addClass('left');
}
else{
if(i % 2 === 0){
$('div#test').eq(i).addClass('left');
}
else{
$('div#test').eq(i).addClass('right');
}
}
}
});
</script>