Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 16, 2016 at 5:21 pm #599027
    oxinst

    Hi, What quick CSS do I need to add to display the image link icon before hover. I have got it to display permanantly after hover, but I wanted to also to display before.

    March 16, 2016 at 8:35 pm #599190
    Basilis

    Hi oxinst!

    can u please provide us an example of what you need to do?
    I am sorry, but could not understand clearly.

    Regards,
    Basilis

    March 17, 2016 at 12:36 pm #599557
    oxinst

    Hi, When an image is hovered over, the icon for a link or video is displayed, then we it is removed once the the hover has stopped. I have managed to achieve it so that when an image is hovered over the icon is kept in place once the hover has stopped. What I want to achieve is that the icon is displayed even befor the hover.

    See here for an image http://imgur.com/pneoRgl

    If you take a look at your demo, http://kriesi.at/themes/enfold/portfolio/ , imagine if the icon was displayed even before the images where hovered over.

    Thanks

    March 21, 2016 at 7:43 am #601083
    Vinay

    Hi!

    First disable the default hover effect so that when you hover over an image with Icon it won’t show 2 icons

    Disable CSS Overlay on images

    Then please use the below CSS

    We recommend enabling custom class names

    Turn on Custom CSS Class field for all ALB Elements

    Add a custom class to portfolio gallery and target only the sections you like or else this css will affect the entire site.

    Please note you can display only one type of icon on all images before hover. it’s a css limitation.

    /* add your custom class name before grid-image */
 .grid-image:before {
        content: '\E832';
    font-family: 'entypo-fontello';
        position: absolute;
    border-radius: 50px;
    background: #000;
    height: 80px;
    width: 80px;
    line-height: 80px;
    left: 50%;
    top: 50%;
    margin: -40px 0 0 -40px;
    z-index: 500;
    text-align: center;
    color: #fff;
}

    Best regards,
    Vinay Kashyap

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