Need help for hover over text effect in elementor pro-CodePudding

I want to achive exactly like this website: https://www.petzl.com/INT/en

Like we will have 3 text/buttons by hovering will change background image, but only by hovering, but text should remain there not disappear by hovering over the text, also instantly when we release hover the main slider image should appear.

I have achieved the hovering but problem is I am unable to keep the text by hovering, also when image is changed it will not reset after hover to the main image I need.

Got the help of code from somewhere and used in elementor pro:

Below is the jquery code:

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
    $('[data-showme]').hover( function(){
        event.preventDefault();
        var showme = $(this).attr('data-showme')
        
        $('.all-img').hide()
        $('.all-text').show()
        $('all-text').hide()
        $('.'   showme).show()
        
    })
})
</script>

Below code for the compplete section having 3 images and 3 text:

selector .all-img{
   display: none;
}
selector .img-1{
    display: block;
}

text classes are named as all-text text1.....and images as all-img img1....

Appreciate the help, thanks

CodePudding user response：

Sorry about this line $('all-text').hide()

Its not in the code, thanks

CodePudding user response：

You can achieve this by only using CSS.

Example

.box-image {
  position: relative;
  height: 400px;
  width: 100%;
  display: grid;
  place-content: center;
  background-color: #000;
  /* Original background */
  background-image: url(https://www.petzl.com/sfc/servlet.shepherd/version/download/06868000007knNDAAY);
  background-position: center;
  background-size: cover;
}

.box-image>div {
  display: inline-block;
  width: 100px;
  text-align: center;
}

.box-image>div img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 0;
}

.box-image>div span {
  position: relative;
  z-index: 1;
}

.box-image>div span:hover img {
  opacity: 1;
}

<div >
  <div >
    <span>Sport</span>
    <img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sViAAJ"> </div>
  <div >
    <span>Professional</span>
    <img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ"> </div>
</div>