<p>Perhaps this would be sufficient? </p>

<div class="dark-hover" style="background-color: red;">
Something Here.
<div class="overlay">
</div>
</div>

<div dir="ltr" class="mw-geshi mw-content-ltr"><div class="css source-css">

<span class="re1">.dark-hover</span> <span class="br0">{</span>
    <span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">relative</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.dark-hover</span><span class="re2">:hover </span><span class="sy0">></span> <span class="re1">.overlay</span> <span class="br0">{</span>
    <span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">block</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.dark-hover</span> <span class="sy0">></span> <span class="re1">.overlay</span> <span class="br0">{</span>
    <span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span>
    <span class="kw1">top</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
    <span class="kw1">left</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
    <span class="kw1">width</span><span class="sy0">:</span> <span class="re3">100%</span><span class="sy0">;</span>
    <span class="kw1">height</span><span class="sy0">:</span> <span class="re3">100%</span><span class="sy0">;</span>
    <span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
    <span class="kw1">background-color</span><span class="sy0">:</span> rgba<span class="br0">(</span><span class="nu0">0</span><span class="sy0">,</span> <span class="nu0">0</span><span class="sy0">,</span> <span class="nu0">0</span><span class="sy0">,</span> <span class="nu0">0.5</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span>

</div></div> <p>If you actually want to perform maths on the colors, then you will have to use JS. I did some digging and couldn't find anything that about retrieving the values as numbers. However, perhaps some custom fucntions like this would work. </p>

<span class="dark-hover" style="background-color: red;">Something Here.</span>

<div dir="ltr" class="mw-geshi mw-content-ltr"><div class="javascript source-javascript">

<span class="coMULTI">/********************* this comment is 80 characters long *********************/</span>
 
<span class="br0">(</span><span class="kw1">function</span> <span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span>
 
    <span class="st0">"use strict"</span><span class="sy0">;</span>
    <span class="kw1">if</span> <span class="br0">(</span>window.<span class="me1">andrewds1021</span> <span class="sy0">&&</span> window.<span class="me1">andrewds1021</span>.<span class="me1">dark_hover</span>
        <span class="sy0">&&</span> window.<span class="me1">andrewds1021</span>.<span class="me1">dark_hover</span>.<span class="me1">has_run</span><span class="br0">)</span> <span class="kw1">return</span><span class="sy0">;</span>
    <span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>window.<span class="me1">andrewds1021</span><span class="br0">)</span> <span class="br0">{</span>
        window.<span class="me1">andrewds1021</span> <span class="sy0">=</span> <span class="br0">{</span>
            dark_hover<span class="sy0">:</span> <span class="br0">{</span><span class="br0">}</span>
        <span class="br0">}</span><span class="sy0">;</span>
    <span class="br0">}</span> <span class="kw1">else</span> <span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>window.<span class="me1">andrewds1021</span>.<span class="me1">dark_hover</span><span class="br0">)</span> <span class="br0">{</span>
        window.<span class="me1">andrewds1021</span>.<span class="me1">dark_hover</span> <span class="sy0">=</span> <span class="br0">{</span><span class="br0">}</span><span class="sy0">;</span>
    <span class="br0">}</span>
    window.<span class="me1">andrewds1021</span>.<span class="me1">dark_hover</span>.<span class="me1">has_run</span> <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span>
 
    <span class="kw1">var</span> elems <span class="sy0">=</span> document.<span class="me1">getElementsByClassName</span><span class="br0">(</span><span class="st0">"dark-hover"</span><span class="br0">)</span><span class="sy0">;</span>
    <span class="kw1">var</span> prefix <span class="sy0">=</span> <span class="st0">"data-DarkHover-"</span><span class="sy0">;</span>
 
    <span class="kw1">for</span> <span class="br0">(</span><span class="kw1">var</span> i <span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">;</span> i <span class="sy0"><</span> elems.<span class="me1">length</span><span class="sy0">;</span> i<span class="sy0">++</span><span class="br0">)</span> <span class="br0">{</span>
        elem.<span class="me1">addEventListener</span><span class="br0">(</span><span class="st0">"mouseenter"</span><span class="sy0">,</span> darken<span class="br0">)</span><span class="sy0">;</span>
        elem.<span class="me1">addEventListener</span><span class="br0">(</span><span class="st0">"mouseleave"</span><span class="sy0">,</span> restore<span class="br0">)</span><span class="sy0">;</span>
    <span class="br0">}</span>
 
    <span class="kw1">function</span> darken<span class="br0">(</span>event<span class="br0">)</span> <span class="br0">{</span>
        <span class="kw1">var</span> color <span class="sy0">=</span> getComputedStyle<span class="br0">(</span>event.<span class="me1">target</span><span class="br0">)</span>.<span class="me1">color</span><span class="sy0">;</span>
        event.<span class="me1">target</span>.<span class="me1">setAttribute</span><span class="br0">(</span>prefix <span class="sy0">+</span> <span class="st0">"color"</span><span class="sy0">,</span> color<span class="br0">)</span><span class="sy0">;</span>
        color <span class="sy0">=</span> color.<span class="me1">substring</span><span class="br0">(</span>color.<span class="me1">indexOf</span><span class="br0">(</span><span class="st0">"("</span><span class="br0">)</span> <span class="sy0">+</span> <span class="nu0">1</span><span class="sy0">,</span> color.<span class="me1">lastIndexOf</span><span class="br0">(</span><span class="st0">")"</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span>
        color <span class="sy0">=</span> color.<span class="me1">replace</span><span class="br0">(</span><span class="st0">" "</span><span class="sy0">,</span> <span class="st0">""</span><span class="br0">)</span><span class="sy0">;</span>
        <span class="kw1">var</span> color_arr <span class="sy0">=</span> color.<span class="me1">split</span><span class="br0">(</span><span class="st0">","</span><span class="br0">)</span><span class="sy0">;</span>
        <span class="kw1">for</span> <span class="br0">(</span><span class="kw1">var</span> i <span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">;</span> i <span class="sy0"><</span> color_arr.<span class="me1">lenth</span><span class="sy0">;</span> i<span class="sy0">++</span><span class="br0">)</span> <span class="br0">{</span>
            color_arr<span class="br0">[</span>i<span class="br0">]</span> <span class="sy0">=</span> parseFloat<span class="br0">(</span>color_arr<span class="br0">[</span>i<span class="br0">]</span><span class="br0">)</span><span class="sy0">;</span>
        <span class="br0">}</span>
        <span class="kw1">var</span> new_color_arr <span class="sy0">=</span> <span class="br0">[</span><span class="br0">]</span><span class="sy0">;</span>
        <span class="coMULTI">/*
            Do your color maths here. "color_arr" should be an array of 3 or 4
            floating point numbers representing the the red, green, blue, and
            opacity (if there are 4) components of the color respectively.
            "new_color_arr" is an array to put the new values into in the same
            order as "color_arr".
        */</span>
        <span class="kw1">var</span> new_color <span class="sy0">=</span> <span class="st0">"rgb"</span><span class="sy0">;</span>
        <span class="kw1">if</span> <span class="br0">(</span>new_color_arr.<span class="me1">length</span> <span class="sy0">==</span> <span class="nu0">4</span><span class="br0">)</span> <span class="br0">{</span>
            new_color <span class="sy0">=</span> new_color <span class="sy0">+</span> <span class="st0">"a"</span><span class="sy0">;</span>
        <span class="br0">}</span> <span class="kw1">else</span> <span class="kw1">if</span> <span class="br0">(</span>new_color_arr.<span class="me1">length</span> <span class="sy0">!=</span> <span class="nu0">3</span><span class="br0">)</span> <span class="br0">{</span>
            <span class="kw1">return</span><span class="sy0">;</span>
        <span class="br0">}</span>
        new_color <span class="sy0">=</span> new_color <span class="sy0">+</span> <span class="st0">"("</span> <span class="sy0">+</span> new_color_arr.<span class="me1">join</span><span class="br0">(</span><span class="st0">", "</span><span class="br0">)</span> <span class="sy0">+</span> <span class="st0">")"</span><span class="sy0">;</span>
        event.<span class="me1">target</span>.<span class="me1">style</span>.<span class="me1">color</span> <span class="sy0">=</span> new_color<span class="sy0">;</span>
    <span class="br0">}</span>
 
    <span class="kw1">function</span> restore<span class="br0">(</span>event<span class="br0">)</span> <span class="br0">{</span>
        <span class="kw1">if</span> <span class="br0">(</span>event.<span class="me1">target</span>.<span class="me1">hasAttribute</span><span class="br0">(</span>prefix <span class="sy0">+</span> <span class="st0">"color"</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span>
            event.<span class="me1">target</span>.<span class="me1">style</span>.<span class="me1">color</span> <span class="sy0">=</span> event.<span class="me1">target</span>.<span class="me1">getAttribute</span><span class="br0">(</span>prefix <span class="sy0">+</span> <span class="st0">"color"</span><span class="br0">)</span><span class="sy0">;</span>
        <span class="br0">}</span>
    <span class="br0">}</span>
 
<span class="br0">}</span><span class="br0">)</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>

</div></div> <p>Time for some disclaimers. I haven't tested this JS so there could be errors. Also, I am assuming all browsers return the color string in the same format as my browser (MS Edge (Chromium)). If different browsers return the color in different formats, then this all goes to s**t. The maths must be done if the RGB/RGBA representation and not HSL/HSLA representation because to allow that would require conversion and I just don't feel like doing that. At least, not for a draft version that might not actually get used. Lastly, this draft only impact the "color" property. However, the script could be expanded to other properties such as "border-color" and "background-color". </p>

<p>Option 1 is perfect </p><p>I realized you could utilize the transparency of the RGB format to create an overlay after posting this question and was hoping someone would bring it up </p>

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