September 27, 2021

Expand image on hover flex css effect

<div class="container">
        <div class="item"><h1><span>One</span></h1></div>
        <div class="item"><h1><span>Two</span></h1></div>
        <div class="item"><h1><span>Three</span></h1></div>
        <div class="item"><h1><span>Four</span></h1></div>
        <div class="item"><h1><span>Five</span></h1></div> 
    </div>

 

body { margin: 0; padding: 0;}
       .container {width: 100vw; height:100vh; display: flex; box-sizing: border-box;}
       .container h1 { margin: 0; padding: 0; line-height: 100vh; transition: 0.5s; background: rgba(0, 0, 0, 0.8);}
       .container h1 span { width: 100%; transition: 1s; padding:20px 25px; }
       .container .item { width:20vw; color:#fff; text-align: center; line-height: 100vh; flex-grow: 1; background-size: cover !important; background-position: center; transition: 1s; background-repeat: no-repeat; }
       .container .item:hover h1 span { color:#333; background: rgba(255, 255, 255, 0.8);}
       .container .item:hover h1 { background: rgba(0, 0, 0, 0);}
       .container .item:hover { width: 30vw;;}
       .container .item:nth-child(1) { background:url(https://images.pexels.com/photos/1190298/pexels-photo-1190298.jpeg?auto=compress&cs=tinysrgb&h=650&w=940); ;}
       .container .item:nth-child(2) { background:url(https://images.pexels.com/photos/341858/pexels-photo-341858.jpeg?auto=compress&cs=tinysrgb&h=650&w=940) ;}
       .container .item:nth-child(3) { background:url(https://images.pexels.com/photos/761543/pexels-photo-761543.jpeg?auto=compress&cs=tinysrgb&h=650&w=940) ;}
       .container .item:nth-child(4) { background:url(https://images.pexels.com/photos/1449791/pexels-photo-1449791.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940) ;}
       .container .item:nth-child(5) { background:url(https://images.pexels.com/photos/1105666/pexels-photo-1105666.jpeg?auto=compress&cs=tinysrgb&h=650&w=940) ;}

 

Leave a Reply

Your email address will not be published. Required fields are marked *