Virtue: Image Menu Item Widget – Hover Menu Messages

[Russell]

Russell

March 25, 2016 at 6:27 am

Hi team

How can I individually edit each hovering menu message for every time I use this widget?

The issue is every single time we use it it inherits this:

.image_menu_message {
background-color: white;
position: absolute;
width: 200px;
height: 160px;
top: 50%;
left: 50%;
margin-top: -80px;
margin-left: -100px;
opacity: 0;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}

.image_menu_message h4 {
position: static;
background: transparent;
text-align:center;
line-height: 30px;
font-size:32px;
font-weight:600;
font-family: Source Sans Pro;
color: #425563
}

.image_menu_message h5 {
position: static;
text-align:center;
font-size:16px;
font-weight:300;
font-family: Source Sans Pro;
color: #425563;
background: transparent;
}

.image_menu_hover_class {
opacity: 0 !important;
}

.image-menu-image-size:hover .image_menu_message {
opacity: 0.85;
}

#pg-277-6 .image_menu_message {
border-radius: 50%;
height: 200px;
}

#pg-277-6 .image_menu_message h4 {
line-height: 30px;
padding-top: 60px;
font-size:32px;
font-weight:600;
font-family: Source Sans Pro;
color: #425563
}
#pl-277 .panel-grid-cell .so-panel {
margin-bottom:0 !important;
}

To be clear we want the flexibility to edit each hovering menu every time we use the widget.