Maronry Element – hover opacity and positioning issues.

I am developing a masonry page that is compatible with desktop and touch devices. Since touch devices open masonry in the hover state, I have finally made one that works across platforms with much struggle. I still have a couple issues:

I cannot change the opacity of the image hover state overlay, which I have as white. I have tried dozens of CSS variations that should have worked but nothing affects it at all.

The other issue is that on medium sized tablets and on horizontal mobile phones the masonry element is sliding up under the menu bar. It needs to maintain a position below tha bar as normal.

Can you tell me how to fix the following:

1. How do I style and change the opacity of the hover overlay with CSS on the default image fade in with the title and text sliding up from the bottom.

2. How do I fix the issue of the masonry element sliding up under the menu bar on certain devices — medium sized tablets and horizontal mobile phones.

3. .I cannot seem to center the title and caption text no matter what I try. I have it set to a left margin at 5% for now, but want to style it centered and it won’t cooperate. Can you show how I can do that in this masonry element?

Login and page info included. Thanks.

— Michael

_____________
Here is my CSS:

/*—————————————-
// Masonry bottom title
//————————————–*/

/* Title Position and Caption Box Size */
.av-masonry-entry .av-masonry-entry-title {
text-align: center !important;
position: absolute;
bottom: 5px;
padding: 5px;
}

/* Title */
#top .av-masonry-entry-title {
font-size: 120% !important;
color: #555555;
line-height: 1.6;
font-weight: 600;
letter-spacing: .08em;
text-align: left !important;
text-shadow: 2px 2px 0px rgba(133,133,133,.4)!important;
margin-left: 5%;
}

/* Title Background */
#top .av-masonry-entry.isotope-item figcaption,
#top .av-masonry-entry.isotope-item .avia-arrow {
background: #ffffff;
}

/* Masonry Content */
#top .av-masonry-entry.isotope-item .entry-content {
font-size: 100% !important;
color: #666666;
line-height: 1.6;
font-weight: 200;
letter-spacing: .08em;
text-align: left !important;
text-shadow: 1px 1px 0px rgba(133,133,133,.4)!important;
margin-left: 5%;
}

/* Hide date */
#top span.av-masonry-date { display: none; }

figcaption.av-inner-masonry-content {
background: #ffffff !important;
}

/*—————————————-
// END Masonry bottom title
//————————————–*/

• This topic was modified 2 years, 4 months ago by blaircomm1. Reason: Addition-1