On hover first image other 2 image hide and content slide up - html

Question

<div class="box-2">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6 img-height-1" style="">
<div class="img-height-1" style="">
<img src="./assets/images/a.png" width="100%" alt="">
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 img-height-2 mt-sm-0 mt-3" style="">
<div class="img-height-2" style="">
<img src="./assets/images/m.png" width="100%" alt="">
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 img-height-3 mt-lg-0 mt-3" style="">
<div class="img-height-3" style="">
<img src="./assets/images/Rose.png" width="100%" alt="">
</div>
</div>
<div class="col-8 content-1" style="">
<div class="box-3 ">
<h2>Dr.Mahaganapathy Dass</h2>
<h6>Cheif Executive Officer</h6>
<p class="pt-5">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, voluptatem! Autem a iste ut id maiores impedit reprehenderit assumenda, quaerat obcaecati perspiciatis blanditiis officia veniam? Corporis a eveniet nulla. Voluptatum fugit recusandae ratione corrupti odio, repudiandae sapiente sed vel inventore earum ad. Totam nihil repellendus, aliquam eum nam distinctio quasi velit quisquam commodi odit culpa voluptate perspiciatis mollitia in porro? Aliquid quas quibusdam laboriosam labore, minima consectetur itaque eveniet amet, nihil at aperiam. Enim magnam eaque rerum soluta repudiandae cupiditate ratione doloribus fugiat, alias pariatur ullam veniam eius autem aspernatur, sed nesciunt voluptatibus quod excepturi sequi perspiciatis deleniti consequuntur! Aliquam!
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia alias veritatis quos maxime sunt soluta accusamus nulla ratione repellat corrupti molestiae, nostrum eligendi, facilis dolorum perferendis ad non unde odio neque. Nihil quia exercitationem animi libero praesentium voluptas placeat suscipit, consequatur molestiae quis minima natus doloribus quidem autem quam veniam?
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse cupiditate alias cum hic dicta at corrupti? Rerum facilis in aspernatur cupiditate consequatur maiores odit repudiandae, consequuntur sequi eaque minus inventore!
</p>
</div>
</div>
<div class="col-8 content-2" style="">
<div class="box-3 ">
<h2>Dr.Mahaganapathy Dass</h2>
<h6>Cheif Executive Officer</h6>
<p class="pt-5">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, voluptatem! Autem a iste ut id maiores impedit reprehenderit assumenda, quaerat obcaecati perspiciatis blanditiis officia veniam? Corporis a eveniet nulla. Voluptatum fugit recusandae ratione corrupti odio, repudiandae sapiente sed vel inventore earum ad. Totam nihil repellendus, aliquam eum nam distinctio quasi velit quisquam commodi odit culpa voluptate perspiciatis mollitia in porro? Aliquid quas quibusdam laboriosam labore, minima consectetur itaque eveniet amet, nihil at aperiam. Enim magnam eaque rerum soluta repudiandae cupiditate ratione doloribus fugiat, alias pariatur ullam veniam eius autem aspernatur, sed nesciunt voluptatibus quod excepturi sequi perspiciatis deleniti consequuntur! Aliquam!
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia alias veritatis quos maxime sunt soluta accusamus nulla ratione repellat corrupti molestiae, nostrum eligendi, facilis dolorum perferendis ad non unde odio neque. Nihil quia exercitationem animi libero praesentium voluptas placeat suscipit, consequatur molestiae quis minima natus doloribus quidem autem quam veniam?
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse cupiditate alias cum hic dicta at corrupti? Rerum facilis in aspernatur cupiditate consequatur maiores odit repudiandae, consequuntur sequi eaque minus inventore!
</p>
</div>
</div>
<div class="col-8 content-3" style="">
<div class="box-3 ">
<h2>Dr.Mahaganapathy Dass</h2>
<h6>Cheif Executive Officer</h6>
<p class="pt-5">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, voluptatem! Autem a iste ut id maiores impedit reprehenderit assumenda, quaerat obcaecati perspiciatis blanditiis officia veniam? Corporis a eveniet nulla. Voluptatum fugit recusandae ratione corrupti odio, repudiandae sapiente sed vel inventore earum ad. Totam nihil repellendus, aliquam eum nam distinctio quasi velit quisquam commodi odit culpa voluptate perspiciatis mollitia in porro? Aliquid quas quibusdam laboriosam labore, minima consectetur itaque eveniet amet, nihil at aperiam. Enim magnam eaque rerum soluta repudiandae cupiditate ratione doloribus fugiat, alias pariatur ullam veniam eius autem aspernatur, sed nesciunt voluptatibus quod excepturi sequi perspiciatis deleniti consequuntur! Aliquam!
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia alias veritatis quos maxime sunt soluta accusamus nulla ratione repellat corrupti molestiae, nostrum eligendi, facilis dolorum perferendis ad non unde odio neque. Nihil quia exercitationem animi libero praesentium voluptas placeat suscipit, consequatur molestiae quis minima natus doloribus quidem autem quam veniam?
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse cupiditate alias cum hic dicta at corrupti? Rerum facilis in aspernatur cupiditate consequatur maiores odit repudiandae, consequuntur sequi eaque minus inventore!
</p>
</div>
</div>
</div>
</div>
On hover first image other 2 image hide and content slide up, On first hover on image other 2 images hide and content comes up with animation, the process go on for other images also on hover,On hover first image other 2 image hide and content slide up, On first hover on image other 2 images hide and content comes up with animation, the process go on for other images also on hover
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
// Content-1 Img-1
$(document).ready(function(){
// Image show/Hide
$('.img-height-1').hover(function(){
$('.img-height-2, .img-height-3').css('display','none');
// content show
$('.content-1').css('display','block');
},function(){
$('.img-height-2, .img-height-3').css('display', '');
// content show
$('.content-1').css('display', '');
} );
// Image show/Hide
$('.img-height-2').hover(function(){
$('.img-height-1, .img-height-3').css('display','none');
// content show
$('.content-2').css('display','block');
},function(){
$('.img-height-1, .img-height-3').css('display', '');
// content show
$('.content-2').css('display', '');
} );
// Image show/Hide
$('.img-height-3').hover(function(){
$('.img-height-2, .img-height-1').css('display','none');
// content show
$('.content-3').css('display','block');
},function(){
$('.img-height-2, .img-height-1').css('display', '');
// content show
$('.content-3').css('display', '');
} );
})</script>

Answer 1

Please visit this site and make sure that you are looking for same type of css hover effect on image at the middle of the page have.
https://ecommerce-project-eight.vercel.app/
Then I will let you know which code I have used.