<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="pxl-grid-item col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12" style="position: absolute; left: 0%; top: 0px;"> <div class="pxl-item--inner" data-wow-duration="1.2s"> <div class="pxl-item--featured hover-imge-effect3"> <img decoding="async" class="" src="https://demo.casethemes.net/savour/wp-content/uploads/2023/04/theme-05-600x800.jpg" width="600" height="800" alt="theme-05" title="theme-05" /> </div> <div class="pxl-item--front"> <div class="pxl-item--overlay"><img decoding="async" class="" src="https://demo.casethemes.net/savour/wp-content/uploads/2023/04/theme-05-600x800.jpg" width="600" height="800" alt="theme-05" title="theme-05" /></div> <h3 class="pxl-item--title">Fast Delivery</h3> <div class="pxl-item--content">We brew delicious, award-winning beers and fry up the crispiest,…</div> </div> <div class="pxl-item--back"> <div class="pxl-item--overlay"><img decoding="async" class="" src="https://demo.casethemes.net/savour/wp-content/uploads/2023/04/theme-05-600x800.jpg" width="600" height="800" alt="theme-05" title="theme-05" /></div> <div class="pxl-item--holder"> <div class="pxl-item--icon"><i class="flaticon flaticon-express-delivery"></i></div> <h3 class="pxl-item--title"><a href="https://demo.casethemes.net/savour/service/fast-delivery/">Fast Delivery</a></h3> <div class="pxl-item--content">We brew delicious, award-winning beers and fry up the crispiest, juiciest hot chicken around. We serve it with our kitchen’s take on vegetarian and seafood dishes, fresh salads.</div> <div class="pxl-item--readmore"> <a class="btn btn-default" href="https://demo.casethemes.net/savour/service/fast-delivery/"> <span>More Details</span> </a> </div> </div> </div> </div> </div>

.pxl-item--image { margin: -40px -40px 0; border-radius: 5px 5px 0 0; position: relative } .pxl-item--image img { -webkit-transition: all 300ms linear 0ms; -khtml-transition: all 300ms linear 0ms; -moz-transition: all 300ms linear 0ms; -ms-transition: all 300ms linear 0ms; -o-transition: all 300ms linear 0ms; transition: all 300ms linear 0ms } .pxl-item--title { margin-bottom: 0; font-size: 18px; line-height: 1.11111; color: #fff; min-height: 40px; flex-grow: 1 } .pxl-item--details { display: inline-block; width: 43px; min-width: 43px; height: 35px; font-size: 24px; color: #fff; background-color: var(--primary-color); border-radius: 5px; text-align: center; line-height: 35px } .pxl-item--meta { display: flex; flex-wrap: nowrap; align-items: center } .pxl-item--price { flex-grow: 1 } .pxl-item--top { color: #969696; margin-bottom: 8px; -webkit-transition: all 300ms linear 0ms; -khtml-transition: all 300ms linear 0ms; -moz-transition: all 300ms linear 0ms; -ms-transition: all 300ms linear 0ms; -o-transition: all 300ms linear 0ms; transition: all 300ms linear 0ms } .pxl-item--attr { position: absolute; bottom: 10px; right: 40px; display: inline-flex } .pxl-item--attr .pxl-attr--content { font-size: 14px; line-height: 22px; color: #dacfca; padding: 14px 22px; border-radius: 5px; background-color: rgba(45,26,7,.95); position: absolute; bottom: 100%; right: -20px; margin-bottom: 25px; width: 240px; -webkit-transition: all 300ms linear 0ms; -khtml-transition: all 300ms linear 0ms; -moz-transition: all 300ms linear 0ms; -ms-transition: all 300ms linear 0ms; -o-transition: all 300ms linear 0ms; transition: all 300ms linear 0ms; opacity: 0; visibility: hidden } .pxl-item--attr .pxl-attr--content:before { content: ''; width: 0; height: 0; border-width: 6px; border-style: solid; border-color: rgba(45,26,7,.95)transparent transparent transparent; position: absolute; bottom: -12px; right: 26px } .pxl-item--attr .pxl-attr--content label { color: #fff; font-size: 16px; font-weight: 700 } .pxl-item--attr .pxl-attr--content .pxl-attr--item+.pxl-attr--item { margin-top: 8px } .pxl-item--attr .pxl-button--info { font-size: 25px; color: #969696; width: 25px; height: 25px; display: inline-flex; align-items: center; cursor: pointer; -webkit-transition: all 300ms linear 0ms; -khtml-transition: all 300ms linear 0ms; -moz-transition: all 300ms linear 0ms; -ms-transition: all 300ms linear 0ms; -o-transition: all 300ms linear 0ms; transition: all 300ms linear 0ms } .pxl-item--attr .pxl-button--info.active+.pxl-attr--content, .pxl-item--attr .pxl-button--info:hover+.pxl-attr--content { opacity: 1; visibility: visible; margin-bottom: 15px } .pxl-item--inner { margin-bottom: 14px; background-color: rgba(34,34,34,.7); border: 1px solid #484848; border-radius: 5px; padding: 40px 40px 37px; overflow: hidden; -webkit-transition: all 300ms linear 0ms; -khtml-transition: all 300ms linear 0ms; -moz-transition: all 300ms linear 0ms; -ms-transition: all 300ms linear 0ms; -o-transition: all 300ms linear 0ms; transition: all 300ms linear 0ms } @media screen and (max-width: 991px) { .pxl-item--inner { padding-left:30px; padding-right: 30px } } .pxl-item--inner:hover { border-color: var(--primary-color); background-color: rgba(var(--third-color-rgb),.9) } .pxl-item--inner:hover .pxl-item--top { color: #ffd9b7 } .pxl-item--inner:hover .pxl-item--attr .pxl-button--info { color: #ffd9b7 } .pxl-item--inner:hover .pxl-item--image img { transform: scale(1.08) } .pxl-grid-inner { margin-left: -7px; margin-right: -7px } .pxl-grid-inner .pxl-grid-item { padding: 0 7px } .pxl-load-more { padding-top: 24px }