-
AuthorPosts
-
July 19, 2022 at 10:52 pm #1358832
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, 3 months ago by blaircomm1. Reason: Addition-1
July 20, 2022 at 9:23 pm #1358959It looks like it is the “Fade-out” effect in the Masonry Element animation that needs opacity change. I don’t klnow if it also has another overlay on hover, but I can get nothing to work and I have tried everything I could find in the support forums plus many more CSS combinations.
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 out” effect with the title and text sliding up from the bottom.
2. How do I fix the issue of the entire 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—and I have tried everything in the support forums. 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 particular masonry element?
- This reply was modified 2 years, 3 months ago by blaircomm1. Reason: SPecifics
- This reply was modified 2 years, 3 months ago by blaircomm1. Reason: 2
July 21, 2022 at 6:39 pm #1359049Please respond. I haven’t had a response in 5 days. Thanks.
July 22, 2022 at 6:53 pm #1359222Please respond. Last response was 14 July, 8 days ago. Devlopment is at a standstill until I hear from you.
July 23, 2022 at 4:18 pm #1359289Hi,
Sorry for our delayed response, to remove the opacity from the masonry element on hover, on the page you linked to, please try this css:#top .av-hover-overlay-fade_out .av-masonry-entry:hover .av-masonry-image-container { opacity: 1; }
For the second issue please try this css:
@media only screen and (min-width: 768px) and (max-width: 989px){ .responsive.html_mobile_menu_tablet.html_header_top.html_header_sticky #top #wrap_all #main { padding-top: 88px !important; } }
To center the masonry title please change this css:
/* 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%; }
to this:
/* Title Position and Caption Box Size */ .av-masonry-entry .av-masonry-entry-title { text-align: center !important; 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-shadow: 2px 2px 0px rgba(133,133,133,.4)!important; width: 100%; }
After applying the css, please clear your browser cache and check.
Best regards,
MikeJuly 27, 2022 at 6:33 pm #1359591Everything is working perfectly. Thank you very much for the response — I understand you guys are inundated with requests and your help is valuable to me filling the gap between what I know and hiring a developer for a small issue, which they usually don’t want to do.
.
July 27, 2022 at 11:26 pm #1359620Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike -
AuthorPosts
- The topic ‘Maronry Element – hover opacity and positioning issues.’ is closed to new replies.