Overlay Farbe in Wordpress Custom CSS ändern

Liebe Comunity,
Ich bin, wie manche hier, ein Anfänger. Ich habe zwar ein wenig Vorkenntnisse in HTML und CSS, doch beim aktuellen Problem stoße ich an meine Grenzen.
Ich bin grade dabei eine Seite mit einem Portfolio auszubauen. Dafür benutzte ich Media Grid Portfolio Plugin. Dazu noch ein Media Grid Overlay Manager Add-on.
Das Problem ist, dass Overlay Manager Add-on nur ein Overlay-Design pro Grid erlaubt. Ich hätte doch gerne, dass die einzelnen Items die Overlays in unterschiedlichen Farben (on hover) haben – sprich, Overlays sollten sich nur in der Farbe unterscheiden.
Ich habe mir jede Menge Videos und Forumbeiträge zu dem Thema angesehen. Doch alle meine Versuche es über Custom CSS Funktion im Plugin zu machen, haben nichts gebracht.
Hier ist die Testseite, wo ich die Einstellungen teste: http://testseite24-7.de/
„Elements Legend“ des Plugins kopiere ich am Ende des Nachrit rein.

Ich habe bis lang ID der Items (Galerien) als Selector genommen. Wenn ich es richtig verstehe, muss ich eigentlich nur die Farbe für das jeweilige Item ändern. Ob ich da richtig liege… Ich habe bis lang geschafft, über Custom CSS Option die Farben aller Items zu verändern (was man in den Einstellungen ohnehin machen kann), in dem ich Zeilen 1023 bis 1027 (rot markiert unten) rüberkopiert und die Farbe geändert haben. Ich Benutze Overlay Class .mgom_18_0 /* full_img_layer */ (ab Zeilen 986). Den Codeabschnitt füge ich hinzu.

/* ***** 18 - test OVERLAY ***** */ 

        .mgom_18_0 { /* full_img_layer */
                top: 0px; left: 0px;
                    background-color: #ffffff;opacity: 0; filter: alpha(opacity=0);                    
                    transition: all 400ms ease 0s;
                    -webkit-transition: all 400ms ease 0s; /* older webkit */
                    -ms-transition: all 400ms ease 0s;                    
            z-index: 890; 
        }
        .mg_box:hover .mgom_18_0 {
                top: 0px; left: 0px;
                    background-color: #ffffff;opacity: 0; filter: alpha(opacity=0);                    
        }

        .mgom_18_1 { /* descr */
                text-align: left;
                    font-size: 14px;                    
                    color: #222222;line-height: 19px;                    
        }




        .mg_box:hover .mgom_18_1 {                
                    color: #383838;
        }

.mgom_18_2 { /* txt_block */                top: 0px; left: 0px;
                    background-color: #ffffff;opacity: 0; filter: alpha(opacity=0);                    
                    transition: all 0ms ease 0s;
                    -webkit-transition: all 0ms ease 0s; /* older webkit */
                    -ms-transition: all 0ms ease 0s;                    
        }




        [COLOR=#ff0000].mg_box:hover .mgom_18_2 {[/COLOR]
[COLOR=#ff0000]                top: 0px; left: 0px;[/COLOR]
[COLOR=#ff0000]                    background-color: #7af08c;opacity: 0.7; filter: alpha(opacity=70);                    [/COLOR]
        }

    .mgom_18_3.mgom_txt_wrap {
        top: 0px; left: 0px;            
                    transition: all 0ms ease 0s;
                    -webkit-transition: all 0ms ease 0s; /* older webkit */
                    -ms-transition: all 0ms ease 0s;        

    }

    .mg_box:hover .mgom_18_3.mgom_txt_wrap {
        top: 0px; left: 0px;    
    }

Ich wäre Euch für jede Hilfe, jeden Ratschlag sehr dankbar!!!!!
Gruß!

Element Legend
[TABLE='class: widefat lcwp_table, width: 1296']

[TD='class: lcwp_label']mg_filter[/TD]

Grid filter container (each filter is a <a> element, each separator is a <span> element)

[TD='class: lcwp_label'].mg_grid_wrap[/TD]

Grid container

[TD='class: lcwp_label'].mg_box[/TD]

Single item box

[TD='class: lcwp_label'].mg_overlay_tit[/TD]

Main overlay title

[TD='class: lcwp_label'].mg_title_under[/TD]

Title under item

[TD='class: lcwp_label']#mg_full_overlay_wrap[/TD]

Lightbox - Full page overlay

[TD='class: lcwp_label'].mg_item_load[/TD]

Lightbox - Item loader during the opening

[TD='class: lcwp_label']#mg_overlay_content[/TD]

Lightbox - Item body

[TD='class: lcwp_label']#mg_close[/TD]

Lightbox - Close item command

[TD='class: lcwp_label']#mg_nav[/TD]

Lightbox - Item navigator container

[TD='class: lcwp_label'].mg_item_title[/TD]

Lightbox - Item title

[TD='class: lcwp_label'].mg_item_text[/TD]

Lightbox - Item text

[TD='class: lcwp_label'].mg_cust_options[/TD]

Lightbox - Item options container (each option is a <li> element)

[TD='class: lcwp_label'].mg_socials[/TD]

Lightbox - Item socials container (each social is a <li> element)

[/TABLE]