Site URL: http://mirandameeks.com/
Hello,
I'm new to CSS and I can't figure it out! I'd like to be able to present my portfolio in full color when you first visit the site, but once you hover over an image in the gallery section, the rest of the images fade to grayscale while the current hovered image maintains its color. Sort of a hover effect on everything but the hovered image, almost like a spotlight, if that makes sense.
My old website did it and I can't remember how I added it: http://mirandameeks.com/
Another example is this: https://codepen.io/jensgro/pen/ohdgF
I currently have this custom CSS, which has the right hover effect, but it's only affecting the hovered item. I would like this effect, but opposite (i.e. affecting the other gallery images instead):
.gallery-masonry-item
img{
filter:grayscale(0%);
transition:10s;
opacity: 1;
transition: 1s;
}
img:hover{
filter:grayscale(1);
opacity: .7;
transition: .7s;
}
It's important that the items maintain their color on their own, but only become grayscale once you hover over an image. Everything else I could find online sets the images to a grayscale filter "permanently" which I don't want.
Thanks for your help, much appreciated!
creedon reacted to a post in a topic:
How to create a hover filter for everything but the hovered item in galleries?
mmeeks reacted to a post in a topic:
How to create a hover filter for everything but the hovered item in galleries?
