I am trying to zoom image on mouseover.I am getting the zoom effect but image should zoom within that "list" tag not out of that "list".
What should I do to get zoom effect like pop up.Edit: I have applied css to list to make it horizontal like:
\[code\]image1 image2 image3 .....\[/code\] in ul and li tag.I have tried following code.\[code\]<div class="mytest" id="slideshow-carousel" style="padding-top:12px;padding-left: 33px;"> <ul id="carousel" class="jcarousel jcarousel-skin-tango"> <li> <a href="http://stackoverflow.com/questions/14453872/#" rel="p1" class="thumbnail_img"> <img src="http://stackoverflow.com/questions/14453872/image.jpg" width="55" height="60" alt="#"/> <span><img src="http://stackoverflow.com/questions/14453872/image.jpg" style="height:100px; width:100px" /></span> </a> </li> <li> <a href="http://stackoverflow.com/questions/14453872/#" rel="p1" class="thumbnail_img"> <img src="http://stackoverflow.com/questions/14453872/" width="55" height="60" alt="#"/> <span><img src="" style="height:100px; width:100px" /></span> </a> </li> </ul></div>\[/code\]Css:\[code\].thumbnail_img { position: relative; z-index: 0; /*right:420px;*/}.thumbnail_img:hover { background-color: transparent; z-index: 100;}.thumbnail_img span img { display: inline-block; margin:-13px 17px 2px -13px;}.thumbnail_img span { position: absolute; visibility: hidden; color: black; text-decoration: none; -webkit-transform:scale(0.8); -moz-transform:scale(0.8); -o-transform:scale(0.8); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; opacity: 0.7;}.thumbnail_img:hover span { /*CSS for enlarged image on hover*/ visibility: visible; background: transparent; top: 0px; left:5px; -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -o-transform:scale(1.2); opacity: 3; height:auto; width:auto; border:0;}\[/code\]
What should I do to get zoom effect like pop up.Edit: I have applied css to list to make it horizontal like:
\[code\]image1 image2 image3 .....\[/code\] in ul and li tag.I have tried following code.\[code\]<div class="mytest" id="slideshow-carousel" style="padding-top:12px;padding-left: 33px;"> <ul id="carousel" class="jcarousel jcarousel-skin-tango"> <li> <a href="http://stackoverflow.com/questions/14453872/#" rel="p1" class="thumbnail_img"> <img src="http://stackoverflow.com/questions/14453872/image.jpg" width="55" height="60" alt="#"/> <span><img src="http://stackoverflow.com/questions/14453872/image.jpg" style="height:100px; width:100px" /></span> </a> </li> <li> <a href="http://stackoverflow.com/questions/14453872/#" rel="p1" class="thumbnail_img"> <img src="http://stackoverflow.com/questions/14453872/" width="55" height="60" alt="#"/> <span><img src="" style="height:100px; width:100px" /></span> </a> </li> </ul></div>\[/code\]Css:\[code\].thumbnail_img { position: relative; z-index: 0; /*right:420px;*/}.thumbnail_img:hover { background-color: transparent; z-index: 100;}.thumbnail_img span img { display: inline-block; margin:-13px 17px 2px -13px;}.thumbnail_img span { position: absolute; visibility: hidden; color: black; text-decoration: none; -webkit-transform:scale(0.8); -moz-transform:scale(0.8); -o-transform:scale(0.8); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; opacity: 0.7;}.thumbnail_img:hover span { /*CSS for enlarged image on hover*/ visibility: visible; background: transparent; top: 0px; left:5px; -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -o-transform:scale(1.2); opacity: 3; height:auto; width:auto; border:0;}\[/code\]