Re: zoom in image on mouse over
Posted: Wed Sep 24, 2008 2:26 pm
Add "z-index: 1;" to the :hover style section, and "z-index: 0;" in the standard section.
A community of PHP developers offering assistance, advice, discussion, and friendship.
http://forums.devnetwork.net/
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>
Code: Select all
img.my_class {height: 100px; width: 100px;}
img.my_class:hover, img.my_class_h {height: 200px; width: 200px;}Code: Select all
<img id="example1" src="example.png" onmouseover="img(this.id,'over');" onmouseout="img(this.id,'out');" />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'); }}