Greyscale images on Digital Pro

[carolacat]

Hi I am trying to greyscale the im,ages on digital pro. I got the tutorial from Genesis blueprints but have to customise the code to match the theme i',m working on.

The code I have is this but it's not making the im,ages go grey and colour upon hover:

img{
filter:grayscale(100%);
transition: 1s ;
transition-delay:7s;
}

img:hover{
filter:grayscale(0%);
transition: 0.8s ;
box-shadow: 3px 3px 5px #777;
}

a.alignleft, img.alignleft, .wp-caption.alignleft{
margin: 10px 24px 5px 0;
}

.front-page-1 {
transition-property:background-image;
filter:grayscale(100%);
transition: 2s ;
transition-delay: 1s;
}
.front-page-1:hover {
transition-property:background-image;
filter:grayscale(0%);
transition: 2s ;
}
</div>

Spot any issues?

http://digpro.digimarketingstudio.com

[Victor Font]

You placed your grayscale filters in a media query in your style sheet.

@media only screen and (max-width: 600px). You won't see the grayscale effect until you shrink the screen to a width less than 600px.

Next, you're applying the grayscale filter to the wrong element. The grayscale effect needs to be applied to the img container, not the img. In the case of the property featured images, the correct element is .elive_property_featured_image and .elive_property_featured_image:hover

As for front-page-1, you're not going to get the effect to work because the image is a backstretch image. The widget that displays your text has a transparent background. It sits on top of the backstretch image, essentially covering it up. Your mouse pointer cannot reach the image to trigger a hover effect. You would have not use a backstretch image and add the image as a background image to front-page-1 in order to achieve a hover effect. The grayscale would be applied to .front-page-1. If you want the text to remain with color, you would also have to remove the grayscale from the widget area. You have a lot of work to accomplish your requirement.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[carolacat]

Ok thanks Victor.

[Author]

Posts