Need help to hover different background images in wordpress HTML code

user_19895457 0
Viewed 32

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

I have displayed background video, 3 texts, by hovering on them the images are changing + links to access them.

But by hovering the text, petzl.com website have activated different images on hover, sometimes different images are appearing on hover.

Can I achieve the different images by css or need to have js or anything? Also need to have span/div elements to appear in one line.

My website link: beta.edgerope.com

Please find code below:

Below is the code, I have added as HTML shortcode in the page and in the background video is displayed

<style>

.image{
   
  height: 800px;
  width: 100%;
  display: grid;
  place-content:center;
  justify-content:middle;
  color: white;
  font-size:30px;
  background-color: #;
  background-position: center;
  background-size: cover;
}

.training{
    display:inline-block;
  padding-top: 50px;
  padding-right: 1500px;
  padding-bottom: 50px;
  padding-left: 1px;
  
}
  
 
.image>div {
  display: inline-block;
  width: 100px;
  
}

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

.image>div span {
  position: relative;
  z-index: 1;
  cursor: pointer;
  display: inline-block;
}

.image>div span:hover+img {
  opacity: 1;
  display: inline-block;
}


.div{
    dipslay
}
</style>

<div class="image">
    
    <div class="services">
     <span class="services" onclick="window.location=''">Services</span>
    <img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ"> 
   
    </div>
    
    
  <div class="Training">
      <span class="training" onclick="window.location='beta.edgerope.com/courses'">Training</span>
    
    <img src="https://beta.edgerope.com/wp-content/uploads/2022/08/1-1-1536x864.jpg"> </div>
    
  <div class="shop">
     <span class="shop" onclick="window.location='beta.edgerope.com/shop'">Shop</span>
    <img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ"> </div>
</div>

:

wordpress css html jquery javascript
1 Answers

There are many ways to acomplish this, and you should be able to do this with pure css and html.

I've made an example that uses css pseudo elements in order to display the correct image when hovering the sections/links. Also changed up to use a tags instead of using onclick="window.location" as you did.

Here you can change/set the default image in the #hero selector

<style>
    /* Styling for the default hero */
    #hero {
        height: 800px;
        width: 100%;
        display: flex;
        color: black;
        background-color: #000;
    }

    /* Wrapper for all the sections */
    .hero-sections {
        width: 100%;
        height: 100%;
        position: relative; /* Allows to change the z-index, and */
        z-index: 1;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 2rem;
    }

    /* Container for the image */
    .hero-image::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -1; /* Allows the image to appear behind the text */
        pointer-events: none; /* Prevent image to show when hovering the ::after element*/
        background-image: var(
            --bg-url
        ); /* Uses the images set by the html (css variable) */
        opacity: 0; /* Hides the image when it's not active */
        transition: opacity 0.5s; /* Adds a fade transition to the opacity*/
    }

    /* Styles when the the user hovers or has focus on the buttons/links */
    .hero-image:is(:hover, :focus-within)::after {
        opacity: 1; /* Change the opacity when the text is active/in hover */
    }

    /* Styles the buttons/links */
    .hero-cta {
        color: white;
        text-decoration: none;
        font-size: 2rem;
    }
</style>

<div id="hero">
    <div class="hero-sections">
        <div
            class="services hero-image"
            style="
                --bg-url: url(https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ);
            "
        >
            <a class="hero-cta" href="#">Services</a>
        </div>

        <div
            class="training hero-image"
            style="
                --bg-url: url(https://beta.edgerope.com/wp-content/uploads/2022/08/1-1-1536x864.jpg);
            "
        >
            <a class="hero-cta" href="beta.edgerope.com/courses">Training</a>
        </div>

        <div
            class="shop hero-image"
            style="
                --bg-url: url(https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ);
            "
        >
            <a class="hero-cta" href="beta.edgerope.com/shop">Shop</a>
        </div>
    </div>
</div>

If you would like to go more advanced here I would recommend implementing some javascript handling mouseenter and mouseleave. As you said you used Wordpress you could also use the .hover() from jQuery.

user_121039120
Related