Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 14, 2018 at 4:46 pm #912343
    Daniel

    Hi,

    We are using the Portfolio Grid with the AJAX Portfolio function, to create a grid of images where the user can click on. It is not always clear for the user that you can click on the image to get more information. On a desktop you can hover over the image but on mobile this is not possible. We would like to have an image overlay with a small image of an arrow for example so visitors understand that you can click on the image. How can we achieve this?

    Thanks, Daniel

    February 15, 2018 at 5:52 am #912623
    Rikard

    Hey Daniel,

    Could you post a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    February 16, 2018 at 3:08 pm #913286
    Daniel

    Hi Rikard,

    Thanks for your reply! I’ve placed the link in the private content section.

    February 16, 2018 at 7:44 pm #913366
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    @media only screen and (max-width: 990px) {
#highlights .image-overlay {
    opacity: 1;
    top: 0;
}}

    Best regards,
    Yigit

    February 19, 2018 at 10:17 am #914178
    Daniel

    Hi Yigit, thanks for this. How would I get an image in this overlay?

    February 19, 2018 at 3:59 pm #914331
    Victoria

    Hi Daniel,

    Just put the url of the image in the content below.
    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
.image-overlay.overlay-type-extern .image-overlay-inside:before {
    content: '\E832';
    font-family: 'entypo-fontello';
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

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