Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #703109

    Hello Kriesi! :)

    I was wondering… On our website we are using some masonry image galleries that show links to other pages, but we would love them to have the same effect as the Portfolio grid images (grey overlay with red arrow and ALT text, the same as here: http://kriesi.at/themes/enfold/portfolio/portfolio-3-column/). Is this possible with some Quick CSS?

    I have attached a link to our website in the Private Content. The images are in the section titled “More about us”.

    Thank you kindly!

    #704314

    Hey Bjdiving,

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

    .av-masonry-image-container:before {
    	 content: ' ';
    	 position: absolute;
    	 width: 100%;
    	 height: 100%;
    	 top:0;
    	 left:0;
    	 background: rgba(0,0,0,.6);
    	 opacity: 0;
    	 transition: all 1s;
    	 -webkit-transition: all 1s;
    	 z-index: 200;
    }
    .av-masonry-image-container:hover:before {
    	 opacity: 1;
    }
    

    Best regards,
    Vinay

    #704637

    Hi Vinay,

    Thanks for the help!
    This works only partly… It makes the image go darker when you hover on it, not white like in the effect here: http://kriesi.at/themes/enfold/portfolio/portfolio-3-column/. Also, it does not show the arrow in the red circle.

    Hope you can help!

    #704861

    Hi!

    Please change background: rgba(0,0,0,.6); in the above code to background: rgba(255,255,255,.4); the last value .4 is the opacity you can change it to any value to from 0.1 to 0.99 to increase or decrease the transparancy.

    Cheers!
    Vinay

    #711045

    Hi Vinay!

    Thanks for the help, but this doesn’t fix it yet… It changes the background to white like what I’m looking for, but still the red arrow/icon is not there like here (http://kriesi.at/themes/enfold/portfolio/portfolio-3-column/).

    Any ideas for that?

    Thanks!

    #712135

    Hi,

    Sorry for the delay, please try using

    background: rgba(255,255,255,.4)!important;

    If that does not work point us exactly where we can see this issue on your site and post us the login credentials to take a closer look and add any custom code if necessary to resolve this issue.

    Best regards,
    Vinay

    • This reply was modified 7 years, 4 months ago by Vinay.
    #712317

    Hi Vinay,

    No this also doesn’t give us the arrows…
    I’ve posted login details below. :)

    Thanks!

    #713350

    Hi,

    The element that you’re looking for is the Portfolio Grid element (http://kriesi.at/themes/enfold/portfolio/portfolio-3-column/). Unfortunately, you cannot apply the same hover effect for the masonry element without modifying one of the parent theme files.

    // https://kriesi.at/support/topic/add-hover-effect-to-masonry-gallery/#post-685471

    Best regards,
    Ismael

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