<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 ----------> <section class="post"> <div class="container"> <div class=" row mx-0 py-5 justify-content-center"> <div class="me text-center"> <h2> BY: ALaa Krunb </h2> <a href="http://fb.com/AlaaKrunb" target="_blank">Contact Me</a> </div> </div> <div class="posts row mx-0"> <div class="post-box active"> <div class="post-box-pic"> <img src="https://i0.wp.com/lovahomy.com/wp-content/uploads/2020/02/Marvelous-Farmhouse-RV-Makeover-Ideas-You-Can-Do-18.jpg" alt=""> </div> <div class="post-box-content"> <h5 class="title">MARVELOUS MAKEOVERS</h5> <p>Dolores sit ipsum velit purus aliquet, massa fringilla leo orci. Lorem ipsum dolor sit amet elit magnis nulla.</p> </div> </div> <div class="post-box"> <div class="post-box-pic"> <img src="http://www.pioneerace.com/server16-cdn/2016/04/23/exterior-color-schemes-for-ranch-style-homes-marvelous-exterior-interior-color-schemes-dc6494e26abbc5dd.jpg" alt=""> </div> <div class="post-box-content"> <h5 class="title">LATEST TRENDS</h5> <p>Dolores sit ipsum velit purus aliquet, massa fringilla leo orci. Lorem ipsum dolor sit amet elit magnis nulla.</p> </div> </div> <div class="post-box"> <div class="post-box-pic"> <img src="https://wall-wrap.ie/wp-content/uploads/2019/06/IMG-20190602-WA0004.jpg" alt=""> </div> <div class="post-box-content"> <h5 class="title">INTERIOR DECORATING</h5> <p>Dolores sit ipsum velit purus aliquet, massa fringilla leo orci. Lorem ipsum dolor sit amet elit magnis nulla.</p> </div> </div> </div> </div> </section>

@media (min-width: 1200px){ .container { max-width: 1240px; } } /*-------------------- posts --------------------*/ .post { padding: 5rem 0; } .posts .post-box{ padding: 0; position: relative; width: 295px; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; overflow: hidden; margin-right: 15px; } .posts .post-box:last-child{ margin-right: 0; } .posts .post-box .post-box-pic{ width: 295px; height: 295px; overflow: hidden; } .posts .post-box .post-box-pic img{ width: 100%; height: 100%; object-fit: cover; } .posts .post-box .post-box-content{ padding: 30px; position: absolute; top: 0; left: 295px; width: 295px; height: 100%; background-color: #f3f3f3; } .posts .post-box .post-box-content .title{ font-size: 16px; margin-top: 0; font-weight: 700; line-height: inherit; margin-bottom: 20px; text-transform: uppercase; } .posts .post-box.active { width: 590px; } @media (max-width:960px) { .post .post-box.active{ width: 100%; margin: 0; } .post .post-box{ width: 100%; margin-right: 0; } [dir ="rtl"] .post .post-box{ margin-left: 0; } .post .post-box .post-box-pic { width: 100%; } .post .post-box .post-box-pic img { max-width: 100%; height: auto; display: block; width: 100%; } .post .post-box .post-box-content{ padding: 20px; position: relative; top: 0; left: 0; width: auto; height: auto; margin-bottom: 25px; max-width: inherit; } }

$(".post-box").hover(function(){ $(".posts .post-box").removeClass("active"); $(this).addClass("active"); });