.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>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.
>Solution :
Your code is almost good. Two things you need to add:
.game__feature__block {
overflow: hidden;
}
And
.container:not(:hover) .game__feature__block:first-child {
flex: 2;
}