css question
- Started
- Last post
- 8 Responses
- histwinsiste
how was this rollover image effect achieved?
i like the way the image expands and overlaps the images next to it.
could anyone provide some example code?
- Hym0
the example code is right there, either it's java or some css you can look up both by viewing the source.
the hover images could be done with absolute positioned in default with display:none and on hover display:block
- Kevin_Sweeney0
the images are shrinking a bit when you rollover so its just a matter of
#divName {
height: 200px;
width: 200px;
background-image: url('image1.jpg');
}#divName:hover {
height: 400px;
width: 400px;
background-image: url('image1_rollover.jpg');
}
- welded0
They'll have to be links since, if memory serves, IE doesn't like pseudo classes like hover on non-anchor elements.
- myobie0
they are links...
IE7 may fix it, but their links anyway...
- histwinsiste0
kevin,
your code makes the images larger on rollover however unlike the site i linked to before, they push the image next it over instead of overlapping it. any ideas?
- Solid0
Hym has the right idea -- there's a hidden div for the 'over' state, with 'onmouseover' and 'onmouseout' tied to Dreamweaver's built-in 'showHideLayers' behaviour.
- instantok0
this might help you out: http://www.avalonstar.com/featur…
- Kevin_Sweeney0
well then you change its horizontal position and change it's z-index =)