<div id="56c46f8385953" class="mg_box mg_pre_show col1_3 row1_3 m_col1_2 m_row1_3 mgi_14 mg_pag_1 mg_gallery mg_transitions mg_closed " rel="pid_14" mgi_w="0.333" mgi_h="0.333" mgi_mw="0.5" mgi_mh="0.333" >
<div class="mg_shadow_div">
<div class="img_wrap mg_has_txt_under" >
<div>
<img src="" class="thumb" alt="NYC" fullurl="//testseite24-7.de/wp-content/uploads/ewpt_cache/367x367_85_1_c_FFFFFF_40d34172585f94f3753e12e0e4b051fc.jpg" mobileurl="//testseite24-7.de/wp-content/uploads/ewpt_cache/400x267_85_1_c_FFFFFF_40d34172585f94f3753e12e0e4b051fc.jpg" />
<noscript>
<img src="//testseite24-7.de/wp-content/uploads/ewpt_cache/367x367_85_1_c_FFFFFF_40d34172585f94f3753e12e0e4b051fc.jpg" alt="NYC" />
</noscript>
<div class="overlays">
<div class="mgom_layer mgom_full_img_layer mgom_18_0 ">
</div
><div class="mgom_txt_wrap mgom_18_3 ">
<div class="mgom_layer mgom_descr mgom_18_1">
</div>
<div class="mgom_layer mgom_txt_block mgom_18_2">
</div>
</div>
</div>
<a href="http://testseite24-7.de/#!mg_ld_14" class="mg_seo_dl_link">'</a>
</div>
</div>
</div>
</div>Greetings fellow members of the community,
I find myself in need of assistance with coding, as my experience is somewhat limited.
Currently, I have a portfolio on my website and I'm utilizing the Media Grid – WordPress responsive portfolio plugin along with the Media Grid Overlay manager add-on. The Overlay Manager only allows for one design to be applied to the entire grid, with the exception of the excerpt feature for each item. However, I am looking to customize the overlay colors for individual items within the same grid (such as NYC). While the developer has mentioned that this customization is possible, they do not offer support in implementing it directly (stating, "However is already feasible, but you need to know CSS and how to inspect code... Each grid item has got an unique selector based on its ID, then isn't particularly difficult to achieve it"). I have identified specific IDs (for example, #56c46f838595 for the NYC Gallery) and the selector (class) for the overlay - in this case, the layer with the changing background color bears the class .mgom_18_0. Despite several attempts to modify the color for a single item, I have been unsuccessful so far. All relevant details are provided below.
Your help in resolving this matter would be greatly appreciated! Thank you in advance!
Warm regards, Mike
UPDATE: Additional HTML content has been added. I now find myself slightly confused as the ID changes every time the page is loaded...
The settings can be tested on the following site:
CSS information pertaining to the overlay type used for the test city grid is included below, followed by an ELEMENT LEGEND for the Plugin. View the Legend Classes Itemshere
/* ***** 18 - test OVERLAY ***** */
.mgom_18_0 { /* full_img_layer */
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;
z-index: 890;
}
.mg_box:hover .mgom_18_0 {
top: 0px; left: 0px;
background-color: #ffb514;opacity: 0.8; filter: alpha(opacity=80);
}
.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;
}
.mg_box:hover .mgom_18_2 {
top: 0px; left: 0px;
background-color: #ffffff;opacity: 0; filter: alpha(opacity=0);
}
.mg_box .mgom_18_3.mgom_txt_wrap > *:not(.mgom_txt_block) {
opacity: 0;
filter: alpha(opacity=0);
}
.mg_box:hover .mgom_18_3.mgom_txt_wrap > *:not(.mgom_txt_block) {
opacity: 1;
filter: alpha(opacity=100);
}
.mgom_18_3.mgom_txt_wrap > * {
transition: opacity 0ms ease 0s;
-webkit-transition: opacity 0ms ease 0s;
-ms-transition: opacity 0ms ease 0s;
}
.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;
}