CODEWITHSUNDEEP
javascriptjqueryhtmlcss
xan
xan

Reputation: 4696

Change dimensions of HTML/CSS boxes on hover

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;
}

Upvotes: 3

Views: 3593

Answers (1)

benbai123
benbai123

Reputation: 1463

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

Upvotes: 1

Related Questions