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
1
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.

Replies

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

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 wrapbootstrap.com/ 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. highabovedesign.com/testing/
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:
The HTML

<div class="container">
  <div class="row">
    <div class="span4 wrapper">
    <img alt="140x140" src="http://lorempixel.com/800/480/" /> 
    <div class="overlay"><img alt="140x140" src="http://lorempixel.com/140/140/" /></div>
    </div>
  </div>
</div>


The CSS:

.wrapper {
	position:relative;
}
.overlay {
	position:absolute;
	top:10px;
	right:10px;
	display:none;
}
.wrapper:hover .overlay{
	display:block;
}


Reply to this topic