Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #708703

    Dear support team,
    I would liked to add an zoom-in icon (ue803, fontello) as overlay on my mansonry gallery so that the user know that they can klick on the images.
    Could you please help me?

    #708705

    sorry I forgot: I meant hover effect

    #709404

    Hi,

    that feature is for masonry gallery not available. Instead you can choose to display title and excerpt on mousover: http://i.imgur.com/5kXb7YM.png

    Best regards,
    Andy

    #713025

    Hallo Andy,
    xpoveda hat also asked the same question. I have tried the codes what Yigit offered on my website but it doesn`t work.

    https://kriesi.at/support/topic/on-hover-effect-in-masonry-images/

    #713029

    Hey!

    Please try adding following code to Quick CSS

    .av-masonry-image-container:after {
        color: blue;
        position: relative;
        top: -150px;
        left: 10px;
        width: 100%;
        font-size: 50px;
        font-weight: normal;
        content: '\E803';
        font-family: 'entypo-fontello';
    }

    Best regards,
    Yigit

    #714357

    Hi Yigit,
    i have applied the codes for the page 8050. However the zoom-icon is always there. I just want it appear on hover. Further I don’t know why it is more space between the lines after I have added the CSS.

    Could you please help me again?

    .page-id-8050 .av-masonry-image-container:after {
    color: #fff!important;
    position: relative!important;
    top: -150px!important;
    left: 10px!important;
    width: 100%!important;
    font-size: 50px!important;
    font-weight: normal!important;
    content: ‘\E803’!important;
    font-family: ‘entypo-fontello’!important;
    }

    #715386

    Hi,

    Please add following code to Quick CSS as well

    .page-id-8050 .av-masonry-image-container:hover:after {
        opacity: 1;
    }
    .page-id-8050 .av-masonry-image-container:after {
        opacity: 0;
    }
    .page-id-8050 .av-masonry-image-container {
        margin-bottom: -35px;
    }

    Best regards,
    Yigit

    #716433

    Dear Yigit,
    it works now. However the zoom-icon isn’t on the middle of the image on mobile versions. How can I correct it?

    #717549

    Hey!

    Place the css code above inside a css media query so that it won’t affect the mobile view.

    @media only screen and (min-width: 768px) {
      /* Add your Desktop Styles here */
        .page-id-8050 .av-masonry-image-container:hover:after {
            opacity: 1;
        }
        .page-id-8050 .av-masonry-image-container:after {
            opacity: 0;
        }
        .page-id-8050 .av-masonry-image-container {
            margin-bottom: -35px;
        }
    }

    Cheers!
    Ismael

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