Tagged: , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 9, 2016 at 1:39 pm #697055
    tobee_hh

    Hey Guys,

    another new project i’m working on. Still with your great Enfold theme.

    Now i have a little problem:

    I want to colour the image on hover, which works fine with this code:
    .av-masonry-image-container {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray; /* IE 6-9 */
    -webkit-transition: all .6s ease;
    }
    .av-masonry-image-container:hover {
    filter: grayscale(0%);
    -webkit-filter: none;
    -moz-filter: none;
    -ms-filter: none;
    filter: none;
    }

    However, this only works when you select the option “default display” is selected on Element Title and Excerpt Styling in Element Captions.

    When the centre title is displayed, the colour effect does not work, which is sad :)

    In addition:

    Is there seperate css code available that changes the font colour when the content changes from b/w to colour when the option “always visible” is chosen in Element Title and Excerpt display settings

    October 9, 2016 at 3:27 pm #697062
    Vinay

    Hey tobee_hh,

    1. It’s not clear what you are mentioning about the first issue. Could you please setup a test page where the code is not working so we can inspect the element in questions and provide you the required css.

    2. To change the title color on hover Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

     .av-masonry-entry-title {
	transition:all .3s;
}
 .av-inner-masonry:hover .av-masonry-entry-title {
	color:gold!important;
}

    Best regards,
    Vinay

    October 9, 2016 at 10:32 pm #697111
    tobee_hh

    Hey Vinay,

    On the test page ” Masonry Problem” you can see that with centered titles, the pictures are not shown in colour on mouseover.

    Best regards,

    T

    October 9, 2016 at 11:20 pm #697115
    Vinay

    Hi,

    I checked all the images in the gallery in the example link and it appears the code works on all images but the image itself is black & white.

    Please check the link in example the image itself is a black and white image.

    Could provide the name of the image title for which the code is not working? It would be easy to troubleshoot.

    Best regards,
    Vinay

    October 10, 2016 at 11:56 am #697238
    tobee_hh

    On this site you can see that the picture is not coloured on mouseover. Not all pictures itself are coloured i know.

    The NZ/AUC and the RUS/LUCJA should however have colour on hover.

    October 11, 2016 at 5:26 am #697609
    Ismael

    Hey!

    Please add this css code to remove the grayscale filter on hover:

    #top .av-masonry-entry:hover .av-masonry-image-container {
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -ms-filter: grayscale(0);
    filter: grayscale(0);
}

    Best regards,
    Ismael

    November 25, 2018 at 1:03 am #1037323
    webWahine

    Thanks, everyone! This was very helpful. I wanted to add another bit of code to help others, since I didn;t want all of the images to be grayscale on a page, so I used this, instead, which works well –

    /* use a class called iSwap to target specific images on a specific page */

.page-id-12 .iSwap a img {
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

.page-id-12 .iSwap:hover a img {
	filter: grayscale(0%);
	-webkit-filter: grayscale(0%);
	filter: grayscale(0%);
}
    November 26, 2018 at 6:47 pm #1037707
    Vinay

    Hi,

    Thank you for sharing your solution, I’m sure it will help others.

    Don’t forget to bookmark Enfold Documentation for future reference.

    Thank you for using Enfold :)

    Best regards,
    Vinay

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Enfold Masonry Change from B/W to Colour on Hover w/ centre Title’ is closed to new replies.