CSS transform a div without affecting surrounding content

Question

I'm working on a way to display help without the need for dialogs or popups, using CSS.

I have an image within a div, that will transition in size when the image is hovered over, displaying the help content.

I have another div below that one, that is representing the content of the page the help div will be on. Here's my code:

HTML:

    <div id="answers" class="answers">
        <img src="images/bullet_question.png" height="50" width="50">
    </div>
    <div class="below">will it push me down?</div>

CSS:

    div.answers
    {
        height: 50px;
        width: 50px;
        background-color: transparent;
        color: #FFF;
        z-index: 2;

    }

    div.answers:hover
    {
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;

        height: 400px;
        width: 400px;
        background-color: #333;
        border: 2px solid #000;
        border-top-left-radius: 30px;
        z-index: 2;

    }

    div.below
    {
        z-index: 1;
    }

The question is, how to transform the answer class div, without affecting the below class div; pushing it downward. As you can see, I did some experimenting with z-index to no avail.

So you would like the div on top to not effect the div below it even though the first div is growing? — Mathias Rechtzigel
– Mathias Rechtzigel, Commented Feb 10, 2014 at 20:12

Zafar · Accepted Answer · 2014-02-10 20:15:52Z

2

You need another div to wrap your image.

HTML

<div id="answers" class="answers">
    <div class="another-div">
        <img src="images/bullet_question.png" height="50" width="50">
    </div>
</div>
<div class="below">will it push me down?</div>

CSS

.answers
{
    height: 50px;
    width: 50px;
    background-color: transparent;
    color: #FFF;
    z-index: 2;

}

.another-div:hover
{
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    position:absolute;
    height: 400px;
    width: 400px;
    background-color: #333;
    border: 2px solid #000;
    border-top-left-radius: 30px;
    z-index: 2;

}

.below
{
    z-index: 1;
    color: red;
}

Working Fiddle

answered Feb 10, 2014 at 20:15

Zafar

3,4444 gold badges31 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

wribit Over a year ago

This didn't work for me, the below div still gets pushed down unfortunately.

Zafar Over a year ago

make sure you have the same code as in fiddle in the answer. in your case you are manipulating class answers's hover, in my case i'm manipulating new class another-div's hover effect.

wribit Over a year ago

you're absolutely right. I just did as you said and it's working great. Thank you Zafar.

wribit Over a year ago

does this work because the child div, transitions into the parent? I'm happy this works, but am frustrated by my lack of understanding of it.

Zafar Over a year ago

the position: absolute; property positions an element on the page by having no effect to other elements, and the element can overlay on top of other elements. the reason why you need another div is to keep the original position of the .below when the element took position absolute. i'm not sure if i could fully express my thoughts, but don't worry, you will start to understand while you acquire more experience.

Collectives™ on Stack Overflow

CSS transform a div without affecting surrounding content

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related