Problem with darkened images on hover

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:,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?

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.