Tagged: , ,

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

    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

    #697062

    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

    #697111

    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

    #697115

    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

    #697238

    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.

    #697609

    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

    #1037323

    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%);
    }
    #1037707

    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

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.