Okay so I have three divs, red, green and black stacked one below the other. When I hover on the slider class, I want the green and black div to slide up on hover. But I don't want the green div to hide behind the red div on hover(like it currently does), instead, it should overlay on top of the red div.
i.e on hover the red, green, and black divs should be visible, with the green div covering a part of the red div.
I've tried using absolute positioning together with z-index, but it doesn't seemt to work!
I've put the html, css and javascript in a jsfiddle: http://jsfiddle.net/8Qsp8/
Problem is not with the positioning. You are using slide function of jQuery. It does not actually pushes your div upwords. It diminishes it from bottom to top. So your green div is not actually moving below your red div. It is vanishing from bottom to top.
Here is what you want: http://jsfiddle.net/8Qsp8/5/
Animated version: http://jsfiddle.net/8Qsp8/13/
You need this jQuery:
$("#slider").mouseover(function () {
$(".slide2").stop().animate({bottom: '100px'});
});
$("#slider").mouseout(function () {
$(".slide2").stop().animate({bottom:'-100px'});
});
Related
How can I cut out a piece of the border around the strawberry image so that it matches the design I have been given?
Div has a standard border and the image is transparent png positioned absolutely.
Black div is a fixed-height container. Blue div should be in the top right corner. Green text must respect the blue div, but also should be aligned to the bottom of the black div. Is that possible?
Try this:
.green-txt
{
clear:both;
}
I have a Div with 2-3 icons in it. The icons are horizontally aligned on top of a big image div.
I want bottom image to be visible in padding area between icons. Which property can help me to achieve this functionality ? Any pointers ??
Style your div with something like this:
background: transparent, ...your other images...;
That assumes your icons are shown as background-images, if not, just specify background: transparent; to your div.
I have 3 divs floating next to each other in a containing div. The leftmost div and the middle div both have a border on the right. Each of the divs has a background image. As you can see in the picture, the two (right) borders appear to be darker in the middle and lighter on the top and bottom.
When I remove the background images from the middle div, the borders appear to have less shading.
And when I take away all three background images, the borders appear a solid color, like the CSS indicates they should be.
What is going on here?
The error you are seeing is an optical illusion. look at the colors in MSPaint.
In the inferno design (SMF 2.0), the red background of the main_body div shows up half on the left and half on the right, how is this done? http://demo.dzinerstudio.com/
You just need a background image on the body element that is aligned top and tiled horizontally.
body {
background: url(/myimage.png) center top repeat-x
}
then just need the image to be the right height for the look your going for...
It's just because the div.wrapper is on top of the div.main_body. To get the half effect on the main_body div, they just have a background color and a gradient image tiled on the x axis.
Is that not you question?