Docs

[Brent-St]

Hi,

Using the search function i was able to find the following code to use.

a.x-img.projects {
background: url(project-img-url) no-repeat center top;
background-size: contain;
transition: 0.25s all ease-in-out;
}

a.x-img.projects:hover img {
opacity: 0;
transition: 0.25s all ease-in-out;
}

a.x-img[class*=“projects”] img {
transition: 0.25s all ease-in-out;
}

projects is the css i have assigned to the image that needs the hover and have substituted project-ing-url with the actual url.

i assume i am not doing this correctly as the animation is not working.

thanks,

Brent

[Brent-St]

This reply has been marked as private.

[Jade]

Hi Brent,

I have just checked your page but I am not certain which section since the project content band doesn’t seem to contain image elements inside it but only an image background. Which images are you trying to change on hover? Kindly provide us a bit more info so that we could assist you further.

[Brent-St]

Hi Jade,

http://command-shift.com/callinex/#projects

the background image of the drill rig and open pit mine is the image i am looking to animate on hover.

thanks,

Brent

[Rupok]

Hi Brent,

That’s what I can see on the section – http://prntscr.com/c6q8e9

Is it correct? I can’t see such implementation there hence confused about the issue. Would you clarify a bit that what you did so far?

Thanks!

[Brent-St]

Hi,

I have added the following cod to the css customizer:

a.x-img.projects {
background: url(http://command-shift.com/callinex/wp-content/uploads/2016/07/manitoba-exploration-zinc-depsoits-e1471140381873.jpg) no-repeat center top;
background-size: contain;
transition: 0.25s all ease-in-out;
}

a.x-img.projects:hover img {
opacity: 0;
transition: 0.25s all ease-in-out;
}

a.x-img[class*=“projects”] img {
transition: 0.25s all ease-in-out;
}

“projects” is the css class i have assigned to the image.

Is there anything i am missing?

thanks,

Brent

[Jade]

Hi Brent,

Please try to add this code in the customizer:

.projects.bg-image:before {
    transition: 0.25s all ease-in-out;
}

.projects.bg-image:hover:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.5);
}

Hope this helps.

[Brent-St]

that did the trick.

thanks very much

Brent

[Joao]

Glad to hear it Brent.

Let us know if we can help with anything else.

Joao

[Author]

Posts