Change dimensions of HTML/CSS boxes on hover

Question

I've a web page having some equal-sized boxes. Some of them are hidden (.dummy), other are visible having class lets say .A,.B & .C as shown in the image below:[The dummy have only been shown here in the image for simplicity. In actual HTML code they don't have any background/border, hence invisible.]

enter image description here

Now, if a user clicks on link A, all boxes expect those of class '.A' will fadeOut. Similarly, for the other links as shown here.

enter image description here

I want only the div#1 box to change dimensions, when the pointer is hovered. However, when I apply the .hover command, the whole page gets distorted. I want every box to remain as it is and only the width of #div 1 gets increased. Similarly, only the height of #div 2 to increase. For this purpose, do I have to write separate classes for each effect?

EDIT #1

These are my relevant codes:

.dummy {
    float:left;
    position:relative;
    overflow:hidden;
    width:6.36896%;
    height:22.2287%;
    margin:2px;
    background:none;
}

.A, .B, .C{
    background:rgba(0, 0, 0, .30);
    float:left;
    position:relative;
    overflow:hidden;
    width:6.36896%;
    height:22.2287%;
    margin:2px;
    box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
    -moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
    -webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
}

You could be a bit more detailed, *increase width* is vague, and please show us what you have done so far. Without seeing a code looks like an "please do it for me..." don't get me wrong. — Roko C. Buljan, Jan 05 '13 at 10:02
Assuming the 'height of #div 2' actually refers to the height of #div 4, and that you want to do this entirely using css then yes, it would appear that separate classes for the width and height behaviour would be required. — PassKit, Jan 05 '13 at 10:02
"ahh now I understand, If I hover `#1` you want that `DIV` to increase 2134px width and 35px height! And if I hover `#4` to increase the width too, right! 870! wow, lemme create the whole demo". Hope you see now how understandable is your question. — Roko C. Buljan, Jan 05 '13 at 10:09
@roXon: I've added the `.hover` class using `JQuery`. Now, `.hover` is being applied to all the elements having `.A`. So, if I hover on `#div1`, `#div4` and `#div5` also undergo transition. — xan, Jan 05 '13 at 10:18

benbai123 · Answer 1 · 2013-01-05T12:01:01.057

1

If all of the Class A divs are under the same parent, you can try nth-of-type selector,

e.g.,

<html>
    <head>
        <style>
            .A {
                width: 50px;
                height: 50px;
                border: 1px solid #CCC;
            }
            #outer div:nth-of-type(1) .A:hover {
                width: 300px;
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div>
                <div class="A"></div>
            </div>
            <div>
                <div class="A"></div>
                <div class="A"></div>
            </div>
        </div>
    </body>
</html>

Regerence:

W3C CSS Selector Reference

edited Jan 05 '13 at 12:01

answered Jan 05 '13 at 10:51

benbai123

1,423
1
11
11

Then you can try detect them based on there parent, see the updated sample. Btw the link above is this post? – benbai123 Jan 05 '13 at 12:00
Sorry: I posted the incorrect link. This was the link I meant: http://stackoverflow.com/questions/14171130/increasing-dimensions-on-hover-without-changing-the-position-of-other-elements/14171542#14171542 – xan Jan 05 '13 at 12:06

Change dimensions of HTML/CSS boxes on hover

1 Answers1