<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>

<p>Not working </p><p>I put the exact CSS code you provided into the MP.css page, then put this into the main page: </p> <div dir="ltr" class="mw-geshi mw-content-ltr"><div class="css source-css">

<div class<span class="sy0">=</span><span class="st0">"dark-hover"</span><span class="sy0">></span><div style<span class="sy0">=</span><span class="st0">"
    box-shadow: 1px 1px 7px 1px black; 
    background: {{BG1}}; 
    border-radius:2em 2em 2em 2em; 
    width:98%; 
    margin: 12px auto; 
    color:{{BGT}}; 
    text-align: left; 
    overflow:hidden"</span><span class="sy0">></span>
...
</div<span class="sy0">></span></div<span class="sy0">></span>

</div></div> <p>I tried putting empty div tags but I'm not sure if I'm doing it right </p>

<p>Try this </p>

<div class="dark-hover" style="
    box-shadow: 1px 1px 7px 1px black; 
    background: {{BG1}}; 
    border-radius:2em 2em 2em 2em; 
    width:98%; 
    margin: 12px auto; 
    color:{{BGT}}; 
    text-align: left; 
    overflow:hidden"><div class="overlay"></div>

        <div style="margin:0 -30px;">[[File:FallMainImage.jpg|750px]]</div>

        <div style="
        font-family: 'Montserrat',
        sans-serif; 
        font-size:220%; 
        margin:22px; 
        font-variant:small-caps">'''imo: The World of Magic'''</div> 

        <div style="
        text-indent: 20px; 
        margin-top: -12px;
        margin-bottom: 3%;">
        The first ever MMORPG ever released to mobile devices!</div>
</div>

<p>Somehow... it works </p><p>Thank you so much and sorry for making you go through the trouble of preparing the code on a silver plate </p>

<p>No problem. But are you still confused as to how it works? If so, then we should work though it so you can do this on your own. </p>

<p>No, I understand now. I was confused about why you defined a separate 'overlay' class, but your example has clarified it </p>