Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • July 23, 2021 at 5:34 pm #1311952
    xeovision

    Hallo,
    i am using the portfolio grid and need to set a text with a button as overlay text on each item.
    Sample here: https://ibb.co/FsPT4j4

    But the only i get is the Category as overlay. I would loke to add content from the form “”Textauszug” or the description fiel in the portfolio item.
    Is that possible?

    The sample html code is e.g.:
    `j lhgofuwrh igu eriugh uireh guioeoug hroueh gourehguo rehoug oreuihg ourehgo oihgreoig
    <div class=”btn-blue”>+</div>`

    July 26, 2021 at 5:12 pm #1312479
    xeovision

    No one an idea?
    I have found this slution but it only add the title as overlay, not the description.

    `/* Portfolio overlay with title */

    /* Disable default animation */
    #top .grid-entry a:hover .image-overlay .image-overlay-inside {
    animation: none;
    }

    /* Overlay */
    /* Portfolio overlay with title – disable default animation */
    #top .grid-entry a:hover .image-overlay .image-overlay-inside {
    animation:none;
    }

    /* Portfolio overlay with title – overlay */
    #top .grid-entry .image-overlay .image-overlay-inside:before {
    content:”;
    position:absolute;
    background:#000000; /* blue */
    height:100%;
    width:100%;
    border-radius:0;
    top:0;
    left:0;
    margin:0;
    }

    /* Portfolio overlay with title – remove default title below */
    .grid-content .avia-arrow,#top .grid-entry .grid-content {
    display:none;
    }

    /* Portfolio overlay with title – display title on hover*/
    .grid-entry a:hover:before {
    content:attr(title);
    position:absolute;
    width:100%;
    z-index:1000;
    text-align:center;
    opacity:1;
    font-size:18px;
    color:#fff!important;
    transform:translateY(-50%);
    animation:avia-fadein .75s 1 cubic-bezier(0.175,0.885,0.320,1.275)!important;
    top:50%;
    padding:0!important;
    display:flex!important;
    align-items:center;
    justify-content:center;
    }

    .avia_transform a:hover .image-overlay {
    opacity:1!important;
    }

    July 27, 2021 at 8:27 am #1312626
    Ismael

    Hi,

    Thank you for the inquiry.

    The description and the title are in the same container, so the css code above should have worked. Please try to remove the current css code, then use the following instead.

    #top .grid-entry .grid-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

#top .grid-entry:hover .grid-content {
   opacity: 1;
}

    This should set the grid content as overlay and display it on hover.

    Best regards,
    Ismael

    July 27, 2021 at 9:21 am #1312657
    xeovision

    HI .. thanks, yes this shows the content as overlay BUT the overlay isn’t clickable anymore, on click i have set a lightbox but this overlay lays over the click function ..so lightbox does not opens

    • This reply was modified 3 years, 1 month ago by xeovision.
    July 30, 2021 at 3:21 pm #1313474
    Mike

    Hi,
    Thank you for your patience and for the link, I examined the first item and I believe we can set the z-index to the link higher that the grid content and also set the link mouse-over opacity to zero so the grid content will show.
    please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #top .grid-entry .inner-entry a:hover .grid-content {
   opacity: 1;
}
#top .grid-entry .inner-entry a:hover {
   opacity: 0 !important;
}
#top .grid-entry a {
    z-index: 1;
}
#top .grid-entry .grid-content {
	z-index: 0;
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    July 30, 2021 at 3:31 pm #1313475
    xeovision

    TOP, This works fine. Many Thanks.

    i have tried several CSS solutions but did not focues on opacity :)
    Ticket can be closed

    July 31, 2021 at 11:41 am #1313582
    Mike

    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

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Grid with html code on overlay’ is closed to new replies.