CSS3 image stack effect ( Source code )

CSS3 image stack effect ( Source code )

Add Bootstrap css

<link href="css/bootstrap.min.css" rel="stylesheet">


HTML


<div class="img-stack-area"> <div class="container"> <div class="row"> <div class="col-md-6 col-xs-12"> <div class="left-content"> <h2> Our Image Gallary</h2> <h1> Some Of our recent photoshoot</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus assumenda consequuntur ea et labore laborum numquam officiis pariatur possimus sit.</p> <a href="">Show More</a> </div> </div> <div class="col-md-6 col-xs-12"> <div class="right-content"> <img src="https://i.postimg.cc/vmFSdq9d/team2.jpg" alt=""> <img src="https://i.postimg.cc/kGzvvGvd/team4.jpg" alt=""> </div> </div> </div> </div> </div>


css


body{ font-family:poppins; background: #ddd; } .img-stack-area{ padding: 100px 0; } .left-content{ font-size: 18px; line-height: 1.9; text-align: center; } .left-content h2 { font-weight: 500; font-size: 20px; text-transform: uppercase; letter-spacing: 2px; } .left-content h1 { font-size: 30px; } .right-content{ position: relative; } .right-content img{ position: relative; width: 50%; box-shadow: 0 0 50px #333; } .right-content img:nth-child(1){ top: -50px; z-index: 1; } .right-content img:nth-child(2){ position: absolute; right: 80px; bottom:0; z-index: 2; } .right-content img:nth-child(2){ } .right-content img:nth-child(3){ z-index: 3; width: 70%; right:auto; left: -50px; bottom: -80px; position: absolute; } .left-content a { text-decoration: none; background: tomato; color: #fff; padding: 10px 40px; display: inline-block; margin-top: 30px; border-radius: 50px; } .left-content a:hover{ background: #333; } @media only screen and (max-width: 600px) { .right-content { margin-top: 101px; } .right-content img { width: 56%; } .right-content img:nth-child(2) { right: 10px; } }