<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h1>Shop By Brand</h1> <div class="cardList"> <div class="card"> <div class="card__bg" style="background-image: url('https://res.cloudinary.com/dxfq3iotg/image/upload/v1562770060/Brand%20snippet/img-2.jpg')"></div> </div> <div class="card"> <div class="card__bg" style="background-image: url('https://res.cloudinary.com/dxfq3iotg/image/upload/v1562770059/Brand%20snippet/img-10.png')"></div> </div> <div class="card"> <div class="card__bg" style="background-image: url('https://res.cloudinary.com/dxfq3iotg/image/upload/v1562770059/Brand%20snippet/img-11.jpg')"></div> </div><span class="cardList__title">Kurtas</span> </div> <div class="cardList"> <div class="card"> <div class="card__bg" style="background-image: url('https://res.cloudinary.com/dxfq3iotg/image/upload/v1562770059/Brand%20snippet/img-8.png')"></div> </div> <div class="card"> <div class="card__bg" style="background-image: url('https://res.cloudinary.com/dxfq3iotg/image/upload/v1562770059/Brand%20snippet/img-9.png')"></div> </div> <div class="card"> <div class="card__bg" style="background-image: url('https://res.cloudinary.com/dxfq3iotg/image/upload/v1562770059/Brand%20snippet/img-5.jpg')"></div> </div><span class="cardList__title">Footwear</span> </div> <div class="cardList"> <div class="card"> <div class="card__bg" style="background-image: url('https://res.cloudinary.com/dxfq3iotg/image/upload/v1562770059/Brand%20snippet/img-5.jpg')"></div> </div> <div class="card"> <div class="card__bg" style="background-image: url('https://res.cloudinary.com/dxfq3iotg/image/upload/v1562770059/Brand%20snippet/img-7.png')"></div> </div> <div class="card"> <div class="card__bg" style="background-image: url('https://res.cloudinary.com/dxfq3iotg/image/upload/v1562770059/Brand%20snippet/img-3.png')"></div> </div><span class="cardList__title">Tops & Tees</span> </div> <div class="cardList"> <div class="card"> <div class="card__bg" style="background-image: url('https://res.cloudinary.com/dxfq3iotg/image/upload/v1562770058/Brand%20snippet/img-6.png')"></div> </div> <div class="card"> <div class="card__bg" style="background-image: url('https://res.cloudinary.com/dxfq3iotg/image/upload/v1562770058/Brand%20snippet/img-1.png')"></div> </div> <div class="card"> <div class="card__bg" style="background-image: url('https://res.cloudinary.com/dxfq3iotg/image/upload/v1562770058/Brand%20snippet/img-4.png')"></div> </div><span class="cardList__title">Watches</span> </div> </div>

* { box-sizing: border-box } body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 70vh; background-color: #FFFACD } h1 { font-weight: 100; text-align: center; font-size: 40px; font-family: "Times New Roman", Times, serif } .container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 60vw; margin: auto } .container h1 { -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 100%; margin: 0 2% 2em 2% } .cardList { position: relative; display: block; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; margin: 2%; -webkit-filter: none; filter: none; opacity: 1; -webkit-transition: 0.25s ease-in-out opacity, 0.25s ease-in-out filter; transition: 0.25s ease-in-out opacity, 0.25s ease-in-out filter; cursor: pointer } .cardList__title { display: block; padding-top: 70%; text-align: center; font-size: 20px; font-weight: bold; opacity: 0.8; z-index: 0 } .cardList:hover .card { box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.5); -webkit-transition: 0.35s ease-out transform, 0.35s ease-out shadow; transition: 0.35s ease-out transform, 0.35s ease-out shadow } .cardList:nth-child(2n+1) .card:nth-child(1) { -webkit-transform: translate(2%, 2%); transform: translate(2%, 2%) } .cardList:nth-child(2n+1) .card:nth-child(2) { -webkit-transform: translate(2%, -2%) rotate(-2deg); transform: translate(2%, -2%) rotate(-2deg) } .cardList:nth-child(2n+1) .card:nth-child(3) { -webkit-transform: rotate(2deg); transform: rotate(2deg) } .cardList:nth-child(2n + 1):hover .card:nth-child(1) { -webkit-transform: translate(30%, 45%) rotate(-2deg); transform: translate(30%, 45%) rotate(-2deg) } .cardList:nth-child(2n + 1):hover .card:nth-child(2) { -webkit-transform: translate(-50%, 35%) rotate(5deg); transform: translate(-50%, 35%) rotate(5deg) } .cardList:nth-child(2n + 1):hover .card:last-of-type { -webkit-transform: rotate(5deg) translate(0%, -40%); transform: rotate(5deg) translate(0%, -40%) } .cardList:nth-child(2n) .card:nth-child(1) { -webkit-transform: translate(2%, 2%); transform: translate(2%, 2%) } .cardList:nth-child(2n) .card:nth-child(2) { -webkit-transform: translate(2%, -2%) rotate(-2deg); transform: translate(2%, -2%) rotate(-2deg) } .cardList:nth-child(2n) .card:nth-child(3) { -webkit-transform: rotate(2deg); transform: rotate(2deg) } .cardList:nth-child(2n):hover .card:nth-child(1) { -webkit-transform: translate(30%, 45%) rotate(-2deg); transform: translate(30%, 45%) rotate(-2deg) } .cardList:nth-child(2n):hover .card:nth-child(2) { -webkit-transform: translate(-50%, 35%) rotate(5deg); transform: translate(-50%, 35%) rotate(5deg) } .cardList:nth-child(2n):hover .card:last-of-type { -webkit-transform: rotate(5deg) translate(0%, -40%); transform: rotate(5deg) translate(0%, -40%) } .card { position: absolute; top: 0; left: 0; width: 100%; padding-top: 60%; background-color: #ccc; -webkit-transition: 0.28s ease-out transform, 0.28s ease-out shadow; transition: 0.28s ease-out transform, 0.28s ease-out shadow; overflow: hidden; z-index: 5; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2) } .card__bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-size: cover; background-color: #ccc } .cardList:hover .card:not(:last-of-type) .card__bg { background-blend-mode: normal; -webkit-filter: none; filter: none; opacity: 1 } .container:hover .cardList { -webkit-filter: grayscale(100%); filter: grayscale(100%); opacity: 0.25; z-index: 1 } .container:hover .cardList:hover { -webkit-filter: none; filter: none; opacity: 1; z-index: 100 }