<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"> <div class="row"> <div class="col-lg-4"> <div class="witr_single_pslide"> <div class="witr_pslide_image"> <img decoding="async" src="https://themexbd.com/poket/food/wp-content/uploads/2021/12/work3.jpg" alt=""> </div> <div class="witr_pslide_custom"> <!-- custom icon --> <a href="#" tabindex="-1"><span class="ti-arrow-right"></span></a> </div> <div class="witr_content_pslide_text"> <div class="witr_content_pslide"> <!-- title --> <h3><a href="#" tabindex="-1">Vegetable and Mushroom</a></h3> <!-- content --> <p> Rice Casserole </p> </div> <!-- button --> </div> </div> </div> </div> </div>

.witr_single_pslide { position: relative; overflow: hidden } .witr_pslide_image { overflow: hidden; position: relative } .witr_pslide_image::before { opacity: 0.5; } .witr_pslide_image:before { position: absolute; content: ''; top: 0; left: 0; bottom: 0; right: 0; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: .5s; transition: .5s; z-index: 1 } .witr_single_pslide:hover .witr_pslide_image img,.witr_single_pslide:hover .witr_pslide_image:before { -webkit-transform: scale(1.2); transform: scale(1.2) } .witr_pslide .witr_pslide_custom { bottom: auto; top: 30px; right: auto; left: 30px; -webkit-transform: scaleX(0); transform: scaleX(0) } .witr_pslide .witr_single_pslide:hover .witr_pslide_custom { bottom: auto; -webkit-transform: scaleX(1); transform: scaleX(1) } .witr_pslide .witr_pslide_custom a span { width: 80px; height: 80px; line-height: 80px; border-radius: 5px; font-size: 30px } .witr_pslide_image img { margin-right: auto; margin-left: auto; -webkit-transition: .5s; transition: .5s; width: 100% } .ps1 .witr_content_pslide_text { position: absolute; bottom: -100px; left: 30px; right: 30px; -webkit-transition: .5s; transition: .5s; opacity: 0; z-index: 2; text-align: left } .ps1 .witr_single_pslide:hover .witr_content_pslide_text { opacity: 1; bottom: 30px } .witr_content_pslide_text h3 { margin-bottom: 0 } .witr_content_pslide_text p { margin-bottom: 4px } .witr_content_pslide_text a { display: inline-block } .ps2.ps1 .witr_content_pslide_text { position: absolute; bottom: auto; top: -100px; left: 30px; right: 30px; -webkit-transition: .5s; transition: .5s } .ps2.ps1 .witr_single_pslide:hover .witr_content_pslide_text { top: 25px } .witr_pslide_custom { position: absolute; bottom: -125px; right: -15px; z-index: 9; -webkit-transition: .5s; transition: .5s } .witr_single_pslide:hover .witr_pslide_custom { bottom: -30px } .witr_pslide_custom a span { width: 110px; height: 110px; line-height: 90px; text-align: center; display: inline-block; font-size: 40px; -webkit-transition: .5s; transition: .5s } .witr_pslide3 .witr_single_pslide { margin-bottom: 100px; overflow: inherit } .ps3.ps1 .witr_content_pslide_text { bottom: -60px; opacity: 1; box-shadow: 0 0 65px 0 #00000017; text-align: center; padding: 20px 10px 45px; border-radius: 5px } .ps3.ps1 .witr_single_pslide:hover .witr_content_pslide_text { bottom: -60px } .ps3 .witr_content_pslide_text h3 a { margin-bottom: 3px } .witr_pslide3 .witr_single_pslide:hover .witr_pslide_custom { bottom: -20px } .witr_pslide3 .witr_pslide_custom { bottom: -17px; right: 50%; -webkit-transform: translateX(50%); transform: translateX(50%) } .witr_pslide3 .witr_pslide_custom a span { width: 45px; height: 45px; line-height: 45px; font-size: 18px; box-shadow: 0 0 65px 0 #00000014 } .witr_pslide4.witr_pslide3 .witr_single_pslide { margin-bottom: 0; overflow: hidden } .witr_pslide4.ps3.ps1 .witr_content_pslide_text { bottom: -170px; padding: 25px 40px 20px; border-radius: 0; left: 20px; text-align: left; right: 20px } .witr_pslide4.ps3.ps1 .witr_single_pslide:hover .witr_content_pslide_text { bottom: 20px } .witr_pslide4.witr_pslide3 .witr_pslide_custom { bottom: auto; right: 45px; z-index: -1; top: 58%; transform: translateY(-50%) } .toggle_pslide { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center } .witr_pslide5 .witr_single_pslide { box-shadow: 0 0 20px 0 rgb(0 0 0 / 10%); border-radius: 5px; margin-bottom: 12px } .witr_pslide5 .witr_pslide_image { width: 100% } .witr_pslide5 .witr_content_pslide_text { padding: 0 15px 0 15px; width: 100% } @media (min-width: 768px) and (max-width:991px) { .toggle_pslide { display:inherit } .witr_pslide5 .witr_content_pslide_text { padding: 10px 15px 15px 15px } } @media (max-width: 767px) { .ps1 .witr_content_pslide_text { padding:0 10px 20px } .witr_content_pslide_text h3 { font-size: 19px } .ps1 .witr_pslide_btnb { float: none; margin-top: 0 } .toggle_pslide { display: inherit } .witr_pslide5 .witr_content_pslide_text { padding: 10px 15px 15px 15px } }