Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 24, 2016 at 5:58 am #703109
    Bjdiving

    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!

    October 26, 2016 at 2:32 pm #704314
    Vinay

    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

    October 27, 2016 at 4:00 am #704637
    Bjdiving

    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!

    October 27, 2016 at 2:49 pm #704861
    Vinay

    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

    November 11, 2016 at 10:29 am #711045
    Bjdiving

    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!

    November 14, 2016 at 8:21 pm #712135
    Vinay

    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 8 years ago by Vinay.
    November 15, 2016 at 5:29 am #712317
    Bjdiving

    Hi Vinay,

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

    Thanks!

    November 17, 2016 at 5:10 am #713350
    Ismael

    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

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