Tagged: ,

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #531204

    Hi,

    I would like your help for these two points please:

    1) How can we hide the “arrow” icon that appears on images when mouse is over? I still want to keep the transparency effect when mouse is over but would like to hide the arrow icon from the whole website.

    2) How to change the colour of the title / except area below each portfolio item?

    Please find the sections I am referring to on this screenshot: http://dns.d.pr/1h5OM/2HW8EX7f

    Thank you

    #531269

    Hi sitesme!

    1.) Try this code in Quick CSS field:

    .image-overlay.overlay-type-extern .image-overlay-inside:before {
    content: '';
    }
    

    2.) Use this code:

    .grid-entry-title.entry-title {
    color: green;
    } 
    

    and adjust as needed.

    Cheers!
    Andy

    #531852

    Hi Andy,

    Thank you for your help.

    The 1st code is great but it still shows the circle where the arrow was. I assumed the arrow / circle was a single item but I was wrong.
    So, how can I hide the circle and the arrow when mouse is over the image? The “image fade” effect shall remain as it is.

    As for code #2, the font color is changed but I would like to change the background only. Basically, the area mentioned here in the red box: http://dns.d.pr/1hzWq/31UcIDcQ

    Many thanks.

    #532461

    Hey!

    1. Try this code instead:

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

    2. It would be much easier for us if you send us a link, where we can inspect the elements in question. However, maybe this is what you need:

    figcaption.av-inner-masonry-content.site-background {
    background-color: red;
    }
    

    Best regards,
    Andy

    #532495

    Dear Andy,

    #1 code worked perfectly fine but I realised that there is also the “enlarge icon” when image expands. Sshot: http://dns.d.pr/1fKAE/4w8SY79f taken from this page: http://kriesi.at/themes/enfold/portfolio/portfolio-2-column/

    In addition to the icon removal, how can we disable the image enlargement? From this page: http://kriesi.at/themes/enfold/portfolio/portfolio-ajax/
    We want to display the image like this: http://dns.d.pr/1iDX4/43JDlRPz and we want to deactivate the lightbox link that will show the image like this: http://dns.d.pr/14d5E/14IlweJp

    As for code #2, it didn’t work. From the same demo page from Enfold, this is the area we would like to change the color (mentioned in red): http://dns.d.pr/1c6xk/5Y7h6MKh

    Thank you a lot for all help provided so far.

    #532503

    Hi!

    1. What do you mean with it works but it still shows the icon? the code is for not showing the icon anymore, so if it still shows it, then it does not work, right? so not sure what you mean. However, try this code:

    span.image-overlay-inside:before {
    display: none;
    }
    

    2. Try this code instead:

    .grid-content {
    background-color: red !important;
    }
    

    Best regards,
    Andy

    #532518

    Hi Andy,

    I meant the first code worked fine to remove this: http://dns.d.pr/15B7P/4UZkLVDv
    And now, your second code worked as well to remove the ajax effect: http://dns.d.pr/1k49t/3REcPbmF

    A new question related to the ajax portfolio, how can I disable the images from showing on a lightbox? I tried to see the settings here but there is no way to remove the link to open the image: http://dns.d.pr/16e3B/6B1reiC0
    You may see the image I am referring to here: http://dns.d.pr/RA1M/3UrKw7zl

    As for the second issue with the colour in the grid background, it worked, but only partially: http://dns.d.pr/K048/5p7XPiJl
    I would like to have all that area in red but it still shows white on the left / right sides of the text.

    Thank you

    #532538

    Hi!

    1. Add this code to remove lightbox:
    a.grid-image.avia-hover-fx {

    pointer-events: none;
    }
    

    2. Add this as well:

    .grid-entry-title.entry-title {
    background-color: red;
    }
    

    Please open a new ticket for a new question in the future.

    Regards,
    Andy

    #532843

    Hi Andy,

    All my initial questions have been fixed now with the following codes, however, the lightbox removal is not right.

    Using Enfold’s demo example: http://kriesi.at/themes/enfold/portfolio/portfolio-ajax/
    I still want to open the image exactly like this: http://dns.d.pr/1bvjW/4YYLrrvl – but the lightbox (http://dns.d.pr/me4x/2dVzhXWU) should not open, ever. We have removed the “zoom into lightbox” icon from the images successfully, now it is just to remove the link from the image itself.

    Hope I was clear enough, please let me know.

    Thank you

    #533360

    Hey!

    edit your portfolio grid element and look for “Link Handling”. Choose “Open a preview of the entry (known as AJAX Portfolio)”.

    Regards,
    Andy

    #533557

    Hi Andy,

    Unfortunately that is what we already have at the moment “Open a preview of the entry (known as AJAX Portfolio)” – we need to REMOVE the Preview / ajax / lightbox altogether and when someone clicks on the picture nothing should happen, the picture should NOT enlarge.

    Basically… the portfolio item should NOT open in a new page or should NOT open in a lightbox. It is enough to open like this only: http://dns.d.pr/1bvjW/4YYLrrvl

    Any quick CSS to remove the preview of the entry on portfolio items?

    Thank you

    #533642

    Hi!

    I am confused by what you are saying:

    when someone clicks on the picture nothing should happen

    I already provided you here (see 1.) ) a solution for this.

    By the way this IS the AJAX Portfolio: http://dns.d.pr/1bvjW/4YYLrrvl

    So no idea what you want now.

    Cheers!
    Andy

    #533649

    Thank you for your patience on this Andy,

    It is harder to explain that I thought, but let me try once again, I am sure it will work now.

    The Ajax Portfolio is FINE and we want to keep it as it is: http://dns.d.pr/1bvjW/4YYLrrvl

    However, after the ajax portfolio opens, the user is (at the moment) able to click on the image and enlarge it to open in a lightbox – I am calling it the “lightbox LINK”: http://dns.d.pr/me4x/2dVzhXWU
    This lightbox LINK is what we would like to remove. In other words: http://dns.d.pr/1kFpe/2XpTUQUA

    I hope this makes it easy to understand.

    Thank you

    #533657

    Hey!

    ok I think I get what you mean finally. Please try this code:

    a.lightbox-added {
    pointer-events: none;
    }
    

    I hope this will work for you.

    Cheers!
    Andy

    #533660

    Spot on Andy! :)

    Thanks again for your great help and patience on this one…

    #533670

    Hey!

    super glad it’s working for you now! Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.

    Regards,
    Andy

Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Image icon & Portfolio tweak’ is closed to new replies.