Opacidad

HTML

<div id="containerEx12">
<div class="ex12"><img src="http://ekladata.com/1cQym0Os-QOodvm95ppitUfjDhw@120x120.gif" alt="" width="150" height="160" /> <img src="https://lh4.googleusercontent.com/-Z2p_xl5_wwE/U7rMFwRoiwI/AAAAAAAAmp8/plB3GrMRB7s/w600-h445-no/1.gif" alt="" width="150" height="160" /> <img src="http://images5.fanpop.com/image/photos/31600000/Cinderella-classic-disney-31690784-500-291.gif" alt="" width="150" height="160" /></div>
</div>

CSS

<style type="text/css"><!--
/*GloriaV */
/*URL: http://tutorialgloriav.eklablog.com/*/
#containerEx12 {width: 800px;
margin: 0 auto;
}
.ex12 img {
margin: 20px;
border: 2px dotted #fff; 
border-radius: 1em;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
}
.ex12 img:hover {
 
opacity: 0.5; top: 30px; }
 100% { opacity: 1; top: 0; }
}
opacity: 0.5; top: 30px; }
 100% { opacity: 1; top: 0; }
}
 opacity: 0.5; top: 30px; }
 100% { opacity: 1; top: 0; }
}
opacity: 0.5; top: 30px; }
 
}
--></style>