Flex Selection With Hover filter effect (HTML, SCSS)

HTML
<section class="container"> <div class="section first"> <div class="cont_title"> <h1>Code<br>1</h1> <h3>Code</h3> </div> <div class="cont_desc"> <p></p> </div> </div> <div class="section"> <div class="cont_title"> <h1>Code<br>2</h1> <h3>Code</h3> </div> <div class="cont_desc"> <p></p> </div> </div> <div class="section"> <div class="cont_title"> <h1>Code<br>3</h1> <h3>Code</h3> </div> <div class="cont_desc"> <p></p> </div> </div> <div class="section"> <div class="cont_title"> <h1>Code<br>4</h1> <h3>Code</h3> </div> <div class="cont_desc"> <p></p> </div> </div> <div class="section"> <div class="cont_title"> <h1>Code<br>5</h1> <h3>Code</h3> </div> <div class="cont_desc"> <p></p> </div> </div> </section>
SCSS
html, body{ margin: 0; max-width: 100%; height: 100%; } .container{ display: flex; justify-content: center; align-items: center; height: 100vh; width: 100vw; &:hover{ & > .section{ filter: brightness(22%); } & > .section:hover{ filter: brightness(100%); } } .section{ flex-grow: 1; position: relative; height: 100%; transition: all 0.4s; align-items: center; justify-content: center; box-sizing: border-box; text-align: center; flex: 1; .cont_title{ position:relative; margin: auto; width: 100%; height: 300px; text-align: center; margin-top: 35vh; h1{ text-transform: uppercase; color: white; font-family: 'Economica', sans-serif; text-shadow: 1px 2px 5px rgba(0,0,0,0.5); font-size: 3.5vw; margin: 0; transition: font-size 0.3s; vertical-align: middle; } h3{ text-transform: uppercase; font-family: 'Economica', sans-serif; font-size: 1.3vw; transition: all 0.3s; color: white; } } .cont_desc{ position: relative; display: block; text-align: center; width: 60%; height: auto; margin: auto; opacity: 0; transition: opacity 0.4s; padding-top: 20px; p{ margin: 0; font-family: 'Economica', sans-serif; color: white; font-size: 25px; } } &:hover{ flex-grow: 1.8; transition: flex 0.4s; & > .cont_title h1{ font-size: 5.3vw; transition: font-size 0.4s; } & > .cont_title h3{ font-size: 1.6vw; transition: all 0.4s; } & > .cont_desc{ opacity: 1; transition-delay: 1s; transition: opacity 0.8s; } } &:nth-child(1){ background: url("https://images2.alphacoders.com/698/698137.jpg") no-repeat; background-attachment: fixed; background-size: 100%; background-position: left; } &:nth-child(2){ background: url("https://images2.alphacoders.com/698/698137.jpg") no-repeat; background-attachment: fixed; background-size: 100%; background-position: left; } &:nth-child(3){ background: url("https://images2.alphacoders.com/698/698137.jpg") no-repeat; background-attachment: fixed; background-size: 100%; background-position: left; } &:nth-child(4){ background: url("https://images2.alphacoders.com/698/698137.jpg") no-repeat; background-attachment: fixed; background-size: 100%; background-position: left; } &:nth-child(5){ background: url("https://images2.alphacoders.com/698/698137.jpg") no-repeat; background-attachment: fixed; background-size: 100%; background-position: left; } } }
JAVASCRIPT
Expand for more options Login