Change width without changing other elements in flex

Question

I am making a website. In my HTML file, I have a div displayed as a flexbox. It's a horizontal div with 7 elements ('cards' with an image and a title). On hover, I want the element to increase width. When I do that it works but the other elements in the row decrease to fill the flex row correctly. I would rather like them to spread, to move away, even if the get out of the screen a bit. I want to make something a little bit like the movie cards in the Netflix website concerning the hover.

So here is a simplification of my site (the concerned part) :

body {
  margin: 0;
  font-family: sans-serif;
}

.row {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.element {
  width: 12%;
  margin: 1.1428571vw;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  cursor: pointer;
  transition: all .28s;
}

.element:hover {
  width: 35%;
}

.element img {
  width: 100%;
  height: 17vw;
  margin: 0;
}

.element h1 {
  width: 100%;
  height: 35px;
  font-size: 16px;
  font-weight: lighter;
  margin: 14px 0;
}

<div class="row">
  <div id="element1" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 1</h1>
  </div>
  <div id="element2" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 2</h1>
  </div>
  <div id="element3" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 3</h1>
  </div>
  <div id="element4" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 4</h1>
  </div>
  <div id="element5" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 5</h1>
  </div>
  <div id="element6" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 6</h1>
  </div>
  <div id="element7" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 7</h1>
  </div>
</div>

So maybe I should use JavaScript to make want I want. I don't know I'm a bit lost here.

Here is my objective:
When you put the mouse on an element, I would like to increase a lot the width, a bit the height, blur the image and display some text over the blurred image (h1, h2 and p).

I really need a direction to achieve all this. So thanks a lot for the help.

score 3 · Accepted Answer · answered Feb 23 '18 at 13:10

To prevent shrinking, just add flex-shrink:0 to .element :

body {
  margin: 0;
  font-family: sans-serif;
}

.row {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.element {
  width: 12%;
  margin: 1.1428571vw;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  cursor: pointer;
  transition: all .28s;
  flex-shrink:0; /* <------ Add this */
}

.element:hover {
  width: 35%;
}

.element img {
  width: 100%;
  height: 17vw;
  margin: 0;
}

.element h1 {
  width: 100%;
  height: 35px;
  font-size: 16px;
  font-weight: lighter;
  margin: 14px 0;
}

<div class="row">
  <div id="element1" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 1</h1>
  </div>
  <div id="element2" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 2</h1>
  </div>
  <div id="element3" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 3</h1>
  </div>
  <div id="element4" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 4</h1>
  </div>
  <div id="element5" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 5</h1>
  </div>
  <div id="element6" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 6</h1>
  </div>
  <div id="element7" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 7</h1>
  </div>
</div>

Thank you very much. I didn't know this. Now, when I put the mouse over the last element, the width changes but to the right. I would like the right elements to 'push the others' to the left. How can I do that ? — Bastien Soucasse, Feb 23 '18 at 13:13
I thought about that and I think I need to modify the width of the row itself on element hover (which is done by your solution) but then it means that when I put the mouse over element 1 the row has to leave the screen on the right, if I put the mouse on element 4 it has to be fully centered (leaving screen on both sides equally) and when I put the mouse on element 7 the row has to leave screen only on the left. I don't know how to make that at all if it really is the solution. Can you help me please ? Thanks. — Bastien Soucasse, Feb 23 '18 at 13:25
Honestly I don't know either. This is another problem altogether. If you are also stuck on this problem, you should open a new question on Stackoverflow. — Jeremy Thille, Feb 23 '18 at 14:05

Change width without changing other elements in flex

1 Answers1