Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #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
    #1358959

    It 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
    #1359049

    Please respond. I haven’t had a response in 5 days. Thanks.

    #1359222

    Please respond. Last response was 14 July, 8 days ago. Devlopment is at a standstill until I hear from you.

    #1359289

    Hi,
    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,
    Mike

    #1359591

    Everything 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.

    .

    #1359620

    Hi,
    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

Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Maronry Element – hover opacity and positioning issues.’ is closed to new replies.