Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • June 11, 2019 at 3:14 pm #1109174
    P4K

    Hi There,

    Two questions:

    1. How can i create a permanent (not a hover overlay) overlay für Images that has a link on the picture?
    2. is it posible to activate the grayscale Effect like in the Manasory Gallery also on a single picture?

    Start

    See the logo gallery in the bottom should work like the Manasory Gallery above but I would like to have a little arrow in the corner, that shows the link behind the picture if there is one. See for example this logo gallery http://www.kasten-mann.de

    Thank you Péter

    June 12, 2019 at 5:12 am #1109345
    Ismael

    Hey P4K,

    Thank you for using Enfold.

    Could you give us a screenshot of the layout that you have in mind? You can use imgur or dropbox.

    You should be able to apply the grayscale effect to a specific image element using this css code.

    .avia_image {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

    Just replace the “.avia-image” selector with a custom css class.

    // https://kriesi.at/documentation/enfold/intro-to-layout-builder/#turn-on-custom-css-class-field-for-all-alb-elements

    Best regards,
    Ismael

    June 12, 2019 at 12:04 pm #1109451
    P4K

    Hey Ismael,

    thank you for your quick awnser!

    Somehow this works only when I place the code in the customizer.
    When I place it in the quick CSS (ENFOLD>GENERAL_STYLING>QUICK_CSS) this does not take any effect.

    the idea is to have a logogallery whits specific Links behind the Logos. Some Logos have no link.
    in the Overview you should see wich logo is linked with more information. SO the idea is to have an overlay image with a small arrow in the corner to mark up the link.

    The Layout for the image-element would look something like this (Picture in Grayscale):

    View post on imgur.com

    The small arrow in the right top corner should be displayed when there is a link set on the picture

    on hover the picture gets colored and the arrow gets dark.

    View post on imgur.com

    Images with no link would look like this:

    View post on imgur.com

    and on hover like this:

    View post on imgur.com

    i have uploaded the small arrow, that could be implemented via css
    http://wp.kasten-mann.de/wp-content/uploads/2019/06/icon_popup.png

    Did you get any idea what i mean?

    Thank you Péter

    • This reply was modified 5 years, 11 months ago by P4K.
    June 12, 2019 at 6:08 pm #1109555
    P4K

    Hi There,

    i found now a solutions, that is not perfect, but works for me… there is just one issue:
    The hover-effect now has some “white scale effect” on it, how can i remove this to get it in color on hover?

    See my link:

    bildtest

    I added following to the Quick CSS and implemented the little arrows to the images manually:

    /*logogallery–*/

    .image-overlay-inside, .image-overlay.overlay-type-extern {
    display: none;
    }

    .grayimage {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    }

    .grayimage:hover{
    -webkit-filter: grayscale(0);
    filter: grayscale(0);}

    June 13, 2019 at 11:38 am #1109829
    Ismael

    Hi,

    Glad to hear that you found a solution.

    Use this additional css code to remove the “white overlay” effect.

    .avia-image-overlay-wrap a.avia_image .image-overlay {
    transform: none;
    opacity: 0;
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.