Hover over effect on an image with text description

Hi, I am trying to add hover effect on 3 images on my home page. When adding hover effect I would like the image to get a dark overlay and 3 different texts that describes it.

Text would consist of big letters (name) and smaller letters (description). 

I am wondering how can I code it and add it in Custom CSS. 

I have tried all the codes that were posted in the forum today and non of them worked for me. 

3 hours ago, anna_ryzha_portfolio said:

Hi, I am trying to add hover effect on 3 images on my home page. When adding hover effect I would like the image to get a dark overlay and 3 different texts that describes it.

Text would consist of big letters (name) and smaller letters (description). 

I am wondering how can I code it and add it in Custom CSS. 

I have tried all the codes that were posted in the forum today and non of them worked for me. 

Can you share your URL so I can check it?

that would be great! 
https://www.annaryzha.com/ 

On 5/27/2024 at 7:56 AM, anna_ryzha_portfolio said:

that would be great! 
https://www.annaryzha.com/ 

 

Text will over image, or still keep left position?

@tuanphan, text over image. 

I wanted an overlay that makes the image darker and the text on that overlay appears when the user hovers over the image. 

On 5/31/2024 at 2:12 AM, anna_ryzha_portfolio said:

@tuanphan, text over image. 

I wanted an overlay that makes the image darker and the text on that overlay appears when the user hovers over the image. 

Can you move text block over image? We can code easier

Sorry for the delay.

Let me know if you need anything else. 

Done: 

Would you be able to provide me with a code without moving text over image? 

If the text is kept the same, when hovering the image, the text will appear to move from left to right, over the image, I think it will look very ugly.

Hi! I am trying to do something similar with my image gallery - making the description visible and the image darker. I tried the method where you have to write every individual description in the CSS, but isn't there a way to just show the description that's connected to the image without rewriting it in the code?

This is what I have so far - I don't want to have to rewrite the description for each link.

.gallery-grid-item.has-clickthrough {
    background-color: black;
}
figure:hover .gallery-grid-image-link::before {
  opacity: 1;}

.gallery-grid-image-link::before {
  opacity: 0;
  z-index: 999;
  position: absolute;
  bottom: 5%;
  left: 5%;
  color: white;
  transition: opacity 1s;}

figcaption.gallery-caption.gallery-caption-grid-simple {
  display: ;}

figure.gallery-grid-item.has-clickthrough:hover img {
  opacity: .85;}

figure.gallery-grid-item.has-clickthrough img {
  transition: opacity .5s;}

/* THIS NEEDS TO BE DONE FOR EACH LINK */
.gallery-grid-image-link[href="/550w21"]::before {
  content: "550 w 21 | residential";
  font-size: 1.5vw;
  font-family:'HelveticaL'
}

On 10/1/2024 at 8:24 PM, cateosb said:

Hi! I am trying to do something similar with my image gallery - making the description visible and the image darker. I tried the method where you have to write every individual description in the CSS, but isn't there a way to just show the description that's connected to the image without rewriting it in the code?

This is what I have so far - I don't want to have to rewrite the description for each link.

.gallery-grid-item.has-clickthrough {
    background-color: black;
}
figure:hover .gallery-grid-image-link::before {
  opacity: 1;}

.gallery-grid-image-link::before {
  opacity: 0;
  z-index: 999;
  position: absolute;
  bottom: 5%;
  left: 5%;
  color: white;
  transition: opacity 1s;}

figcaption.gallery-caption.gallery-caption-grid-simple {
  display: ;}

figure.gallery-grid-item.has-clickthrough:hover img {
  opacity: .85;}

figure.gallery-grid-item.has-clickthrough img {
  transition: opacity .5s;}

/* THIS NEEDS TO BE DONE FOR EACH LINK */
.gallery-grid-image-link[href="/550w21"]::before {
  content: "550 w 21 | residential";
  font-size: 1.5vw;
  font-family:'HelveticaL'
}

You need to enable Gallery Caption & Add some title first

Next, use this CSS code

figure.gallery-grid-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-grid-item:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-grid-item-wrapper a:after {
    background:rgba(0,0,0,0.5); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

If it doesn't work, you can share link to your site, we can check easier