<style> .dsblockzoom{ position: relative; } .dsblockzoom img{ position: absolute; left: 0; } .dsblockzoom img.maximg{ opacity: 0; visibility: hidden; } .dsblockzoom img.minimg{ z-index: 1; } @-webkit-keyframes dszooma{ 0%{ z-index: -1; opacity: 0; } 50%{ opacity: 1; z-index: -1; left: 100%; box-shadow: none; } 51%{ z-index: 2; } 100%{ left: 0; box-shadow: 8px 8px 15px gray; } } @-moz-keyframes dszooma{ 0%{ z-index:-1; opacity:0; }50%{ opacity:1; z-index:-1; left:100%; box-shadow: none; }51%{ z-index:2; } 100%{ left:0; box-shadow: 8px 8px 15px gray; } } @-ms-keyframes dszooma{ 0%{ z-index:-1; opacity:0; } 50%{ opacity:1; z-index:-1; left:100%; box-shadow: none; } 51%{ z-index:2; } 100%{ left:0; box-shadow: 8px 8px 15px gray; } } .dsblockzoom:hover img.maximg{ -webkit-animation-name:dszooma; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 1; -moz-animation-name:dszooma; -moz-animation-duration: 1s; -moz-animation-iteration-count: 1; -ms-animation-name:dszooma; -ms-animation-duration: 1s; -ms-animation-iteration-count: 1; animation-name:dszooma; animation-duration: 1s; animation-iteration-count: 1; visibility:visible; opacity:1; box-shadow: 8px 8px 15px gray; z-index:2; } .dsblockzoom:hover img.minimg{ opacity:0.5; } </style> <div class="dsblockzoom" style="width:300px; height:171px"> <img class="minimg" src="http://www.novickiy.ru/_ph/10/2/449262736.jpg" alt="zoom effect" /> <img class="maximg" src="http://www.novickiy.ru/_ph/10/449262736.jpg" alt="zoom effect" /> </div>