How to keep the image static and the first element temporarily flexed

.game__feature__block {
    transition: 1s;
    flex: 1;
    padding: 15px;
    border: 1px solid #e40e0e;
    background-position: 50% 0%;
    background-size: contain;
    background-repeat: no-repeat;
    box-shadow: 0 0 20px -4px #000, inset 0 0 0 5px #200607;
    text-align: center;
  }
  .game__feature__block:hover{
    flex: 2;
}
.container {
    width: 100%;
    max-width: 1480px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 10px;
    padding-left: 10px;
  }

JavaScript
​x
 
.game__feature__block {
    transition: 1s;
    flex: 1;
    padding: 15px;
    border: 1px solid #e40e0e;
    background-position: 50% 0%;
    background-size: contain;
    background-repeat: no-repeat;
    box-shadow: 0 0 20px -4px #000, inset 0 0 0 5px #200607;
    text-align: center;
  }
  .game__feature__block:hover{
    flex: 2;
}
.container {
    width: 100%;
    max-width: 1480px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 10px;
    padding-left: 10px;
  }
  

<html>
<div class="container" style="display:flex;">
  <div class="game__feature__block" >
      <img src="https://i.imgur.com/Qz2XMxk.png">
      <h3 class="game__feature__title">RAIDS</h3>
      <p>chambers of xeric.</p>
  </div>
  <div class="game__feature__block">
      <img src="https://i.imgur.com/Qz2XMxk.png">
    <div>
      <h3 class="game__feature__title">RAIDS2</h3>
      <p>theatre of blood osrs.</p>
    </div>
  </div>
  <div class="game__feature__block">
      <img src="https://i.imgur.com/Qz2XMxk.png">
    <div>
      <h3 class="game__feature__title">TRADINGPOST</h3>
      <p>Where you can sell or buy your item to another players.</p>
    </div>
  </div>
  <div class="game__feature__block">
      <img src="https://i.imgur.com/Qz2XMxk.png">
    <div>
      <h3 class="game__feature__title">Presets</h3>
      <p>Save and fast Equipment Your Item.</p>
    </div>
  </div>
</div>
</html>

JavaScript
 
<html>
<div class="container" style="display:flex;">
  <div class="game__feature__block" >
      <img src="https://i.imgur.com/Qz2XMxk.png">
      <h3 class="game__feature__title">RAIDS</h3>
      <p>chambers of xeric.</p>
  </div>
  <div class="game__feature__block">
      <img src="https://i.imgur.com/Qz2XMxk.png">
    <div>
      <h3 class="game__feature__title">RAIDS2</h3>
      <p>theatre of blood osrs.</p>
    </div>
  </div>
  <div class="game__feature__block">
      <img src="https://i.imgur.com/Qz2XMxk.png">
    <div>
      <h3 class="game__feature__title">TRADINGPOST</h3>
      <p>Where you can sell or buy your item to another players.</p>
    </div>
  </div>
  <div class="game__feature__block">
      <img src="https://i.imgur.com/Qz2XMxk.png">
    <div>
      <h3 class="game__feature__title">Presets</h3>
      <p>Save and fast Equipment Your Item.</p>
    </div>
  </div>
</div>
</html>

So I would like to keep the images and text in from of the img frozen. And the first element to be flexed: 2 as default and flex back to 1 when other elements are hovered. IDK is there is a better they then flex but this could work fine I think. Doesnt seem to work on this snippet but on separate files it works.

Answer

Your code is almost good. Two things you need to add:

.game__feature__block {
  overflow: hidden;
}

JavaScript
 
.game__feature__block {
  overflow: hidden;
}
​

And

.container:not(:hover) .game__feature__block:first-child {
  flex: 2;
}

JavaScript
 
.container:not(:hover) .game__feature__block:first-child {
  flex: 2;
}
​

Advertisement

Answer