<p>Hey, I once again need help with that. Your code will probably work, but I am struggling to tailor it to my needs </p><p>I wish to have an overlay in the blocks here: w:c:imotwom </p><p>Here is the CSS: w:c:imotwom:MediaWiki:MP.css </p>

Which boxes are you referring to?

<p>Any of the main containers </p> <div style="box-shadow: 1px 1px 7px 1px black; background: lightgrey; border-radius:2em 2em 2em 2em; width:50%; height:110%; margin: 12px auto; color:black; text-align: left; overflow:hidden"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div>

<p>Well, were you trying to do something different then what we previously discussed? The CSS your currently have is not what we talked about and the boxes are doing what the CSS is telling it to do. </p>

<p>Right, the current CSS changes the color to a specified color upon hover. I failed to incorporate your code so I fell onto the backup plan </p><p>To clarify, I want to darken the entire area (preferably not the text) upon hover </p>

<p>When you say "entire area", do you mean including the image? Because the image is box content just like the text is so it won't be impacted by the background change. </p>

<p>Tentatively no, I do not want the image to be affected </p><p>Eventually I can just change the z-index if I change my mind right? </p>

<p>No. Changing the z-index would hide the image behind its container. So if you want the content to remain unaltered, then I am confused about what isn't working. I tried the first box and it seems to working just fine. When I hover over it, the background color changes. Where you going for something different? </p>

<p>Currently I am manually inputting the hover-over color. I want it to darken by covering it with a transparent black overlay, as you did in your code </p><p>background-color: rgba(0, 0, 0, 0.5); </p>

<p>My code works that way because of the dummy div tag that serves as the overlay. If you want to do it the way I showed you, you will need to insert an empty div at the end of the box (or the beginning if you don't want the contents to be dimmed). Give that empty div the overlay class and copy the format of the CSS I provided. </p>