.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>
Advertisement
Answer
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; }