Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 23, 2017 at 3:03 am #867413
    kbarranco

    I tried and tried and can’t get this the way I want it. I’m afraid there may be some CSS overlap.

    On my homepage,

    Home

    I have a portfolio grid just like I want it,
    but I want a standard overlay to
    1) when the user hovers, I would like a semi-transparent overlay
    2) and white title only (is smaller)
    3) the title centered both horizontally and vertically
    4) no sliding title, just a fade in or whatever.

    can someone help?

    October 23, 2017 at 8:46 am #867490
    Nikko

    Hey KK,

    Try adding this css code in Quick CSS (located in Enfold > General Styling):

    .home .grid-image:before {
    background: rgba(0,0,0,0.5) !important;
    top: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

    Let us know if this helps :)

    Best regards,
    Nikko

    October 23, 2017 at 11:18 pm #867876
    kbarranco

    Thanks Nikko-
    I just need to adjust the font size too.

    I am afraid the CSS that pertains to this in QuickCSS is a mess. Can you see if there is unnecessary code or duplicate? see below:

    /*portfolio grid- test*/
    .grid-entry:hover .grid-content {
    opacity: 1!important;
    }
    .grid-content {
    opacity: 0!important;
    }
    /*css from enfold*/
    .home .grid-image:before {
    background: rgba(0,0,0,0.5) !important;
    top: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    }
    #top .no_margin.av_one_fifth.grid-entry {
    padding-right: 24px;
    padding-bottom: 24px;
    }
    .grid-content {
    margin-top: -54px;
    }
    .grid-image:hover:before {
    top: 50px;
    }
    .grid-entry:hover .grid-content {
    opacity: .2;
    }
    .grid-content {
    opacity: .2;
    }
    .image-overlay-inside:before{
    display: none !important;
    }
    /* below code fixes squares and labels that show on bottom*/
    .image-overlay {
    background: #ffffff;
    }
    .grid-image:before {
    content: attr(title);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1000;
    text-align: center;
    opacity: 0;
    font-weight: 200;
    font-size: 24px;
    color: #ffffff !important;
    top: 50%;
    }
    .grid-image:hover:before {
    opacity: 0.9;
    }
    .grid-image:before{
    transition: all linear 0.2s;
    }
    /*cleans up messy borders,deletes title on bottom*/
    .grid-content {
    display: none !important;
    }
    /* for sliding title*/
    #block-post article .slide-content {
    position: absolute;
    top: 0;
    }

    October 24, 2017 at 5:14 pm #868293
    Nikko

    Hi,

    You can add

    font-size: 18px;

    to the code I gave it should look like:

    .home .grid-image:before {
    background: rgba(0,0,0,0.5) !important;
    top: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

    Just adjust the 18px to the value you want. As for your code I think .grid-content seems to be used many times, you can group them.

    Best regards,
    Nikko

    October 27, 2017 at 8:23 pm #869744
    kbarranco

    thank you! perfect.

    October 30, 2017 at 6:08 am #870321
    Ismael

    Hi,

    Glad we could help. Please feel free to open a new thread if you need anything else.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Portfolio Grid needs semi-transparent overlay’ is closed to new replies.