CODEWITHSUNDEEP
css
AkisC
AkisC

Reputation: 827

On hover absolute element but keep other elements at start position

Sorry but I don't know how to ask/search that because of my bad English.

I have div elements that is float left each other. I want when mouse over in one div to change width with transition and overlapping the other on right.

HTML

<div class="boxes">
  <div class="box" style="background:red"></div>
  <div class="box" style="background:green"></div>
  <div class="box" style="background:blue"></div>
</div>

CSS

.boxes {
  position: relative;
}
.box {
  float:left;
  margin: 5px;
  width: 100px;
  height: 100px;
  transition: width 1s ;
}
.box:hover{
  width: 155px;
  position: absolute;
}

example jsfiddle

In the example I have 3 boxes (red, green and blue) when mouse over on red, the green box going on left:0 (don't wont that) I want to stay at position and red box overlaps the green, same when mouse over on green box to overlap the blue one.

Upvotes: 2

Views: 1764

Answers (1)

Nenad Vracar
Nenad Vracar

Reputation: 122087

Instead of using floats and changing width on hover you can use inline-block to position elements inline and transform: scaleX() to change element width on hover. Also you need to add transform-origin: left to make element scale from left to right.

.box {
  margin: 5px;
  width: 100px;
  height: 100px;
  transition: all 0.3s ease-in;
  transform-origin: left;
  display: inline-block;
}
.box:hover{
 transform: scaleX(1.3);
}
<div class="boxes">
  <div class="box" style="background:red"></div>
  <div class="box" style="background:green"></div>
  <div class="box" style="background:blue"></div>
</div>

Upvotes: 1

Related Questions