Advanced CSS Animator Support Product Page

How do you stack divs so when the top image is rolled over the bottom

Asked 18 Dec 2013 15:39:21
has this question
18 Dec 2013 15:39:21 jeff Napadow posted:
I want to have an image, visible. and when a user rolls over it an image appears semi transparent to allow the user to click. If I place divs one on top of another and hide the one to appear there's a lot of white space. Do I need to make an inner div or something? The tutorial "game" doesn't say how to layer the divs.


Replied 18 Dec 2013 15:42:46
18 Dec 2013 15:42:46 Teodor Kuduschiev replied:

Please provide an example of the effect that you want to achieve.
Replied 18 Dec 2013 16:05:46
18 Dec 2013 16:05:46 jeff Napadow replied:
Something like the image rollovers. I am using a rollover gif and the tooltip extension but cannot minimize the open space when the div is hidden, or, collapsed. See my example here.
Replied 18 Dec 2013 16:27:46
18 Dec 2013 16:27:46 Teodor Kuduschiev replied:
Well this is actually not an issue with the CSS Animator, but the way you build your page. All you need is:
- 1 relative positioned wrapping div
- 2 absolute positioned div inside the wrapping div. The image div (width/height=100%, top/left=0, z-index=1) The overlay div (size and position as you wish, z-index=2)
So when you hide the wrapping div, the two divs inside it also get hidden.
Replied 18 Dec 2013 16:35:59
18 Dec 2013 16:35:59 jeff Napadow replied:
Might there be an example of this somewhere? Maybe one of your templates?
Replied 18 Dec 2013 16:44:52
18 Dec 2013 16:44:52 Teodor Kuduschiev replied:
This is a really simple example of what i mean:

<div class="container">
  <div class="row">
    <div class="span4 wrapper">
    <img alt="140x140" src="" /> 
    <div class="overlay"><img alt="140x140" src="" /></div>

The CSS:

.wrapper {
.overlay {
.wrapper:hover .overlay{

Reply to this topic