HTML CSS: Show background picture/ video on hover (Custom HTML)

[antonia_viola]

Hello,

I tried a lot and nothing is working.
Can someone help me with showing a background picture/video on hover. It's costume HTML that's why the hover Plugin is not working.

When you hover on the title it stops and should show a background picture (clouds) fullscreen. How can I do that?

website:
https://antoniaviola.com/front-page

Greetings from Constance :)

[Richard]

Hey Constance @antonia_viola

Cool website!

Could you post all the Custom Code you are using, just to have a better understanding? :)

Best wishes and a wonderful day

Richard

[antonia_viola]

Thank you so much! yes Richard of corse!!

This is the costume code I am using for every Project-title:

<section class="project1" id="project-1">
<header class="project-header">
<h3 class="project-category">DESIGN</h3>
<h3 class="project-title1" + class="hover-title2">
<a href="https://antoniaviola.com/in_concert">
<span class="fx-title1 fx-title--a fx-speed--1">Fragile 070Shake</span>
<span class="fx-title1 fx-title--b fx-speed--1">Fragile 070Shake</span>
</a>
</h3>

                </header>
               
                


 
<style>

a{
color: white;
}

a:hover {
color: #9000f7;
}

.project1 {
z-index: 5000;
display: flex;
flex-wrap: wrap;
width: 140%;
height: 8.6vw;
}

/* PROJECT HEADER */

.project-header {
display: flex;
width: 100%;
color: white;
font-family: 'ACE-110-DELUXE';
}

.project-category {
    z-index: 1;
    width: 0%;
    padding-top: 0vw;
    padding-bottom: 0vw;
    padding-left: 0vw;
    padding-right: 0vw;
    text-align: center;
    vertical-align: middle;
}

.project-title1 {
    z-index: 2;
    white-space: nowrap;
    display: flex;
    justify-content: left;
    align-items: left;
    width: 200%;
    position: relative;
    overflow: hidden;
    padding-right: 50vw;
    cursor: pointer;
    transition: all 200ms ease;
   
}

.project-title1:hover,
.project.state--active .project-title {
    color: #9000f7;
}

.fx-title1 {
z-index: 100;
display: block;
width: 100%;
font-size: 8vw;
text-align: center;
position: absolute;
animation-duration: 7s;
animation-iteration-count: infinite;
animation-timing-function: linear;

}

.fx-speed--1 { animation-duration: 30s }

.fx-title--a { animation-name: fx-title--a }
.fx-title--b { animation-name: fx-title--b }

@keyframes fx-title--a {
0% { right: -100%; }
100% { right: 0% }
}

@keyframes fx-title--b {
0% { right: 0%; }
100% { right: 100% }
}

.project.state--active .fx-title1,
.project-title1:hover .fx-title1 {
animation-play-state: paused;
}
</style>

[Richard]

Dear @antonia_viola

Just wanted to reach out to say i haven't forgotten: Trying to manage many threads at the moment, will let you know as soon as i can - sorry about the delay! :)

Have a wonderful day and best wishes
Richard

Also! this will help us in the future and others that may read :)

<header> ( im assuming <section> ends somewhere not with this code? we need a </section> end bracket )

<section class="project1" id="project-1">
    <header class="project-header">

        <h3 class="project-category">DESIGN</h3>

        <h3 class="project-title1" + class="hover-title2">

              <a href="https://antoniaviola.com/in_concert">
                   <span class="fx-title1 fx-title--a fx-speed--1">Fragile 070Shake</span>
                   <span class="fx-title1 fx-title--b fx-speed--1">Fragile 070Shake</span>
              </a>
     </h3>
</header>

CSS:

<style>

   a{
       color: white;
    }

   a:hover {
       color: #9000f7;
   }

.project1 {
     z-index: 5000;
     display: flex;
     flex-wrap: wrap;
     width: 140%;
     height: 8.6vw;
     }


/* PROJECT HEADER */

     .project-header {
     display: flex;
     width: 100%;
     color: white;
     font-family: 'ACE-110-DELUXE';
     }

.project-category {
    z-index: 1;
    width: 0%;
    padding-top: 0vw;
    padding-bottom: 0vw;
    padding-left: 0vw;
    padding-right: 0vw;
    text-align: center;
    vertical-align: middle;
}

.project-title1 {
    z-index: 2;
    white-space: nowrap;
    display: flex;
    justify-content: left;
    align-items: left;
    width: 200%;
    position: relative;
    overflow: hidden;
    padding-right: 50vw;
    cursor: pointer;
    transition: all 200ms ease;
   
}

.project-title1:hover,
       .project.state--active .project-title {
        color: #9000f7;
}

.fx-title1 {
    z-index: 100;
   display: block;
   width: 100%;
   font-size: 8vw;
   text-align: center;
   position: absolute;
   animation-duration: 7s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
  }

.fx-speed--1 { animation-duration: 30s }

.fx-title--a { animation-name: fx-title--a }
.fx-title--b { animation-name: fx-title--b }


@keyframes fx-title--a {
0% { right: -100%; }
100% { right: 0% }
}

@keyframes fx-title--b {
0% { right: 0%; }
100% { right: 100% }
}

.project.state--active .fx-title1,
.project-title1:hover .fx-title1 {
animation-play-state: paused;
}

</style>

Best :)

[antonia_viola]

@Richard-K Alright no problem! Respond when you have time and thank you very much :)!

[Richard]

Dear @antonia_viola

Ok im back, i see what your doing now with the code, however what do you wish to achieve again, sorry i dont understand.
When i hover over a title i get an image in the background, you need this to be fullscreen? or something else im missing? :)

Script:

 
 
    //get project element
    const project5 = document.getElementById('project-5');
    
    //set url of the background image
    const imageProject5 = 'https://antoniaviola.com/wp-content/uploads/2020/12/website81.jpg';
    
    //add listeners for image
    try{
        window.addHoverBackgroundImage(project5, imageProject5);
    }catch(e){
        console.log("Add hover bg img not found :(");
    }
    

Best
Richard