html - How to scale image out of div? -

html - How to scale image out of div? -

i trying scale image on hover using css,

here code

html:

<div class="cli-wrap"> <ul class="clearfix" id="ci-list" style="width: 2640px;"> <li style="margin-left: 0px;" class="zoomage"><a target="_blank" href="#"><img border="0" src="images/1.png"></a></li> <li style="margin-left: 0px;" class="zoomage"><a target="_blank" href="#"><img border="0" src="images/2.png"></a></li> <li style="margin-left: 0px;" class="zoomage"><a target="_blank" href="#"><img border="0" src="images/3.png"></a></li> <li style="margin-left: 0px;" class="zoomage"><a target="_blank" href="#"><img border="0" src="images/4.png"></a></li> <li style="margin-left: 0px;" class="zoomage"><a target="_blank" href="#"><img border="0" src="images/5.png"></a></li> <li style="margin-left: 0px;" class="zoomage"><a target="_blank" href="#"><img border="0" src="images/6.png"></a></li> <li style="margin-left: 0px;" class="zoomage"><a target="_blank" href="#"><img border="0" src="images/7.png"></a></li> </ul> </div>

css:

.zoomage:hover img { -webkit-transform:scale(7.10); /* safari , chrome */ -moz-transform:scale(7.10); /* firefox */ -ms-transform:scale(7.10); /* ie 9 */ -o-transform:scale(7.10); /* opera */ transform:scale(7.10); z-index:1; } .cli-wrap { display: block; margin: 0 auto; overflow: hidden; padding: 40px; width: 620px; z-index: -1; }

here image scaling on hover but, image scaling within div .cli-wrap. image scaling big size scaling within div. need scale image outside div. tried using z-index div .cli-wrap

how can this?

i have achieved result in far more simpler way:

instead of this:

.zoomage:hover img { -webkit-transform:scale(7.10); /* safari , chrome */ -moz-transform:scale(7.10); /* firefox */ -ms-transform:scale(7.10); /* ie 9 */ -o-transform:scale(7.10); /* opera */ transform:scale(7.10); z-index:1; }

i did

.zoomage:hover{ width:1848px; /*somevalue here, chose u want here, ie scaled downwards image*/ }

hope helps!

html css