Show titles in project portfolio without hovering

Hi Support,

I would like to use the portfolio to show my projects on my page. Instead of just showing the project titles when hovering over the image, I would however like to show the title always (e.g. white text with a slightly transparent black background) as an overlay and ADDITIONALLY have the standard hover effect (e.g. white text with a slightly transparent orange background). I tried using this code

.project-title-wrap { 
  opacity: 0.8 !important;
  background-color: #000;
}  

but the black background mixes with the orange background of the hover effect instead of showing only orange. Furthermore, when hovering, the image overlay changes from black to no overlay at the borders of the image when in transitioning to black-orange; therefore I would prefer no zoom-in effect to prevent these color changes.

Could you help me please? Unfortunately I cannot post the link to the page since I am working offline.

Thank you very much for your great theme!

Hello, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

.roll-project .project-item .project-title-wrap {
    opacity: 1;
    animation: none !important;
    transition-duration: 0.5s;
}

.roll-project .project-item:not(:hover) .project-title-wrap {
    background-color: rgba(0, 0, 0, 0.5);
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

2 Likes

Thank you very much! It works perfectly.

One last question please: I would like to increase the opacity only when hovering over the project. How could I achieve this?

Kind regards, Annett

You are welcome Annett! Try to add this as well:

.project-wrap .roll-project .project-item:hover .project-pop {
    opacity: 0.8;
}

Kind Regards, Roman.

2 Likes

Awesome, thank you very much!

You are welcome Annett! :slight_smile:

Kind Regards, Roman.