Page 2 of 2

Re: zoom in image on mouse over

Posted: Wed Sep 24, 2008 2:26 pm
by gethinw
Add "z-index: 1;" to the :hover style section, and "z-index: 0;" in the standard section.

Re: zoom in image on mouse over

Posted: Wed Sep 24, 2008 2:30 pm
by pickle
Look into absolute positioning or z-index.

We've given you a couple possible solutions, but I haven't seen you try to solve it yourself. Try implementing at least one of these solutions - do a web search if you have to - the answers are out there.

Re: zoom in image on mouse over

Posted: Wed Sep 24, 2008 2:38 pm
by iknowu99
like this?

Code: Select all

 
 <style type=text/css>
     .enlarge img{
    width:25px;
    height:15px;
    z-index: 0;
    }
    .enlarge:hover img{
    z-index: 1;
    width:500px;
    height:300px;
    } 
 </style>
 
 

Re: zoom in image on mouse over

Posted: Wed Sep 24, 2008 2:54 pm
by pickle
Try it.

And use appropriate [syntax=css]/[/syntax][syntax=html]tags please.[/syntax]

Re: zoom in image on mouse over

Posted: Wed Sep 24, 2008 2:58 pm
by iknowu99
didnt work. this sux!

Re: zoom in image on mouse over

Posted: Mon Aug 17, 2009 11:05 am
by JAB Creations
iknowu99, are you using Internet Explorer? If so the CSS hover pseudo-element will not work unless you have IE7 or newer.

Code: Select all

img.my_class {height: 100px; width: 100px;}
img.my_class:hover, img.my_class_h {height: 200px; width: 200px;}
Are you applying the CSS selector correctly? img.my_class is implemented as <img class="my_class" src="example.png" />.

If you want to use JavaScript give your image an id and change the class (using the CSS classes from above) the following way...

HTML

Code: Select all

<img id="example1" src="example.png" onmouseover="img(this.id,'over');" onmouseout="img(this.id,'out');" />
JavaScript

Code: Select all

function img(id,state){ if (state=='over') {  document.getElementById(id).className='my_class_h'; } else if (state=='out') {   document.getElementById(id).className='my_class'; } else {  alert('Error: Call function using parameters over or out'); }}