CODEWITHSUNDEEP
htmlcsshovercss-transitions
CodeGodie
CodeGodie

Reputation: 12132

Hover on div element does not do the effect individually

I have multiple divs with the same class of "product". When I hover on each product element, I need them to have a hover effect, but the problem is that when I hover over the first element, all other elements also have the effect applied rather than just the one i hovered. What am i doing wrong?

<style>
    div.product{
        width:90%;
        margin:10px auto;
        height: 200px;
        transition: all 0.1s ease;
        background-color: #069;
    }
    div.product:hover{
        margin-top:-5px;
    }
    .img_box{
        width:50%;
        height:100%;
        padding: 10px;
        float:left;
        box-sizing: border-box;
    }
    .desc_box{
        width:50%;
        height:100%;
        float:left;
        padding: 10px;
        box-sizing: border-box;
    }
    .img{
        background-color: #b65050;
        height: 100%;
    }

    .desc{
        background-color:  chocolate;
        height: 100%;
    }
</style>

HTML:

<div>
<div class="product">
    <div class="img_box">
        <div class="img">
            image
        </div>
    </div>
    <div class="desc_box">
        <div class="desc">
            desc
        </div>
    </div>
</div>
<div class="product">
    <div class="img_box">
        <div class="img">
            image
        </div>
    </div>
    <div class="desc_box">
        <div class="desc">
            desc
        </div>
    </div>
</div>
 <div class="product">
    <div class="img_box">
        <div class="img">
            image
        </div>
    </div>
    <div class="desc_box">
        <div class="desc">
            desc
        </div>
    </div>
</div>
 <div class="product">
    <div class="img_box">
        <div class="img">
            image
        </div>
    </div>
    <div class="desc_box">
        <div class="desc">
            desc
        </div>
    </div>
</div>
</div>

heres my fiddle: MY FIDDLE

Upvotes: 0

Views: 122

Answers (1)

Randy
Randy

Reputation: 4391

This is because you are floating the divs. Changing margin-top moves the element which creates room underneath it.

What you need is this:

div.product{
    position:relative;
}

div.product:hover{
    top:-5px;
}

position:relative basically takes up the original space but lets the div to be rendered elsewhere.

Upvotes: 2

Related Questions