Problem with section:hover? - Support | Kriesi.at

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
May 27, 2016 at 11:52 am #639228

aderal2016
Participant

Good morning,

I’m facing with a problem that I think it’s not depending on my code. This is why the same code into another website with enfold works, and in this one not..

Anyway I’ll try to explain as best as I can: I have a section (#mission) with a .jpg background, so I created the following css

#mission:hover {
background-repeat: no-repeat;
background-image: url(‘http://aderal.es/wp-content/uploads/2016/05/home-aderal-promo-message-video.gif’);
background-attachment: scroll;
background-size: cover;
background-position: center center;
z-index: 9999;
}

The goal is to load the gif image when I over into the div section, but not working. Same issue happens with social icons in the footer, but the same code works into the other website. I’ll place the links into the private content..

is this a bug or my fault?

Regards,
Davide

May 27, 2016 at 12:15 pm #639239
Vinay
Inactive Moderator
Hey aderal2016,

To change the div background image you need to set the background for it in css instead of setting the background image in backend.
```
#mission{
background-image: url(‘background_1.jpg’);
}
#mission:hover {
background-image: url(‘background_2.jpg’);
}
```
The social icons do not change color on hover because it is a image. please use the default social icon included in the theme and apply the working css you already have on the blog page to change the background color.

Best regards,
Vinay
May 27, 2016 at 12:22 pm #639241

aderal2016
Participant

Hi Vinay,

thanks for ur answer but it doesn’t work :( check… neither the main bg now is shown..

May 27, 2016 at 4:14 pm #639360
Vinay
Inactive Moderator
Hey!

I think what you have is correct but the image path is wrong. Please remove old code and replace the image path in the below code and use it. I have tested this on your site and it works :)
```
#mission {
    background-repeat: no-repeat;
    background-image: url('http://aderal.es/wp-content/uploads/2016/05/home-aderal-promo-message-video.gif');
    background-attachment: scroll;
    background-size: cover;
    background-position: center center;
}

#mission:hover {
    background-image: url('http://aderal.es/blog/wp-content/uploads/2016/05/Slide_REACTVERTISING.jpg');
}
```
Cheers!
Vinay
May 27, 2016 at 5:28 pm #639408

aderal2016
Participant

Hi Vinay,

Sorry I think there’s a misunderstanding..

I want to keep this jpg as main, and the gif when hover

static state: http://aderal.es/wp-content/uploads/2016/05/home-aderal-claim.jpg
hover state: http://aderal.es/wp-content/uploads/2016/05/home-aderal-promo-message-video.gif

Code:

#mission {
background-image: url(‘http://aderal.es/wp-content/uploads/2016/05/home-aderal-claim.jpg’);
}

#mission:hover {
background-image: url(‘http://aderal.es/wp-content/uploads/2016/05/home-aderal-promo-message-video.mp4’);
}

Doesn’t working…neither the static image in not hover statement..

May 28, 2016 at 8:56 am #639686

Vinay
Inactive Moderator

Hi!

Please use the code provided here and don’t forget to replace the images with your own :)

Cheers!
Vinay

May 29, 2016 at 1:24 am #639879

aderal2016
Participant

Now it works the hover, but doesn’t show the hover image :D

May 29, 2016 at 8:35 am #639908
Vinay
Inactive Moderator
Hi,

Please make sure the background image path is correct it will work :)

open the image in media library and copy the URL

Best regards,
Vinay
- This reply was modified 8 years, 5 months ago by Vinay.
May 29, 2016 at 12:02 pm #639954

aderal2016
Participant

Hi Vinay,

the patch is correct

http://aderal.es/wp-content/uploads/2016/05/home-aderal-claim.gif

Best
Davide

May 29, 2016 at 12:13 pm #639957

Josue
Inactive Moderator

Hola,

El estado hover es un video o un gif? ninguno de los dos links que has puesto retorna un archivo (404):
[video src="https://aderal.es/wp-content/uploads/2016/05/home-aderal-promo-message-video.mp4" /]
http://aderal.es/wp-content/uploads/2016/05/home-aderal-promo-message-video.gif

Saludos,
Josue

May 29, 2016 at 12:44 pm #639977

aderal2016
Participant

Hola Josue,

si porqué por sea caso he cambiado el nombre y he vuelto a subirlo.. esto es el nuevo path en los CSS
http://aderal.es/wp-content/uploads/2016/05/home-aderal-claim.gif

Gracias,
Davide

May 29, 2016 at 12:48 pm #639979
Josue
Inactive Moderator
Este código debería funcionar:
```
#mission:hover {
    background-image: url('http://aderal.es/wp-content/uploads/2016/05/home-aderal-claim.gif');
}
```
Asegurate de resetear todas las minificaciones / cacheos que tengas activados.
Author

Posts

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.