//HMTL <div class="container"> <div id="a" class="box">Div A</div> <div id="b" class="box">Div B</div> <div id="c" class="box">Div C</div> <div id="d" class="box">Div D</div> <div id="e" class="box">Div E</div> <div id="f" class="box">Div F</div> </div> //CSS body { font-family: arial; font-weight: 600; color: white; font-size: 2em; } .container { display: grid; grid-template-columns: repeat(3, 1fr); padding: 10%; text-align: center; grid-gap: 40px; } .box { background-color: green; padding: 20px; } #a { } #a:hover { grid-column: 1 / 4; grid-row: 1/6; } #a:hover ~ #b { background: #ccc; grid-column: 4; } #a:hover ~ #c { background: #ccc; grid-column: 4; } #a:hover ~ #d { background: #ccc; grid-column: 4; } #a:hover ~ #e { background: #ccc; grid-column: 4; } #a:hover ~ #f { background: #ccc; grid-column: 4; } #b:hover { grid-column: 1 / 4; grid-row: 1/6; } #b:hover ~ #a { background: #ccc; grid-column: 4; } #b:hover ~ #c { background: #ccc; grid-column: 4; } #b:hover ~ #d { background: #ccc; grid-column: 4; } #b:hover ~ #e { background: #ccc; grid-column: 4; } #b:hover ~ #f { background: #ccc; grid-column: 4; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter