Problem with darkened images on hover

HTML-CSS
1

I am trying to make an image darken and show some text on the darkened image when hovered.

I got an example code from StackOverflow:

https://stackoverflow.com/questions/14263594/how-to-show-text-on-image-when-hovering#:~:text=Wrap%20the%20image%20and%20the,appear%20while%20hovering%20that%20div.&text=You%20can%20also%20do%20the,alt%20text%20of%20your%20image.

I tried to do the exact same thing with my image, but when I did it, there is this extra blue background color exceeding the bottom of the red flower image (and the example image also):

My questions are:

  1. Why is this happening?

  2. Any idea on how to fix this?

  3. Also, if I want to move the text on the image, is that done by modifying the padding of the image description element?

2

Hi @mkobayashi0801!

In comparing your code with theirs, you are missing the "img__description_layer"

Once you add that div in and those styles then it should work.