<div class="pic"> <img src="http://www.muratoner.net/images/test.jpg" width="200px" height="200px" /> </div>
.pic{ float:left; height: 200px; width: 200px; margin: 20px; overflow: hidden; background-image:url('http://i691.photobucket.com/albums/vv273/muratoner/iStock_000013202244XSmall.jpg'); background-size:200px 200px; border-radius: 10px; -webkit-box-shadow: 0 0 10px rgba(0,0,0,.3); box-shadow: 0 0 10px rgba(0,0,0,.3); } .pic>img{ height:200px; width:200px; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; -ms-transition:all 1s ease; transition:all 1s ease; } .pic>img:hover{ opacity:0; }