CODEWITHSUNDEEP
htmlcss
Jack Scott
Jack Scott

Reputation: 119

div width increase on hover (without displacing inline divs)

Here is the link to my page mintrain.co.uk/indexsp

So, for the front-page I have made the four categories have width 25%. On top of this, I've made the width double to 50% on hover. Upon hovering, the div on the far right is pushed below the others. How, using css, can I prevent this? I had the idea of making the non-hovered div width decrease (to 16%) but i do not know how to achieve this. Any help would be great.

Upvotes: 0

Views: 196

Answers (1)

IiroP
IiroP

Reputation: 1102

I'd recommend using flexbox. Just add display: flex to container and flex: 1 to childs to make layout you want. Then add bigger flex value to :hover. Like this:

.container {
  display: flex;
}

.link {
  flex: 1;
  
  /* For demo only */
  border: 1px solid #000;
  height: 40px;
  transition: 1s all;
}

.link:hover {
  flex: 1.5; /* Or any other value */
}
<div class="container">
  <div class="link"></div>
  <div class="link"></div>
  <div class="link"></div>
  <div class="link"></div>
</div>

For your site, just replace .container with .boxes and .link with #box (which isn't valid HTML on your site, having multiple same IDs)

Upvotes: 2

Related Questions