CODEWITHSUNDEEP
htmlcssresizehoverposition
behizz
behizz

Reputation: 37

show a div over another when resizing on hover

I have some divs with fixed width and height beside each other in a row. I want to increase the width and height on hover but show the result div over other divs not sending them to the next row

how can I do it with css ?

my HTML:

<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>

my CSS:

.box{
   float:right;
   width:173px;
   height:173px;
}

.box:hover{
   width:220px
   height:220px;    
}

Upvotes: 0

Views: 2484

Answers (1)

Facundo Colombier
Facundo Colombier

Reputation: 3661

are you looking for something like this?

.box{
   float:right;
   width:173px;
   height:173px;
   margin-top:10px;
}

.box:hover{
   width:220px;
   height:220px;    
   margin-left:-47px;
   position:relative;
}

edit: a css example of @malcom's choice:

.box{
   float:right;
   width:200px;
   height:200px;
   margin-top:10px;
    background-color:grey;
    border:1px solid;
    margin-top:30px;
}

.box:hover{
   width:250px;
   height:250px;    
   margin-left:-25px;
   position:relative;
    margin-right:-25px;
    margin-top:5px;
    transition:all 200ms ease-in-out 0s;
}

http://jsfiddle.net/jxvN6/1/

Upvotes: 2

Related Questions