Img hover css

[stefanmz]

Hey just wondering can I cerate a hover element in css like image:hover that can also change the color of an image?

 

[minibois]

How do you envision the color of the image changing?

For example, if a box element with a certain color overlaid over the image is enough, you can use something like shown here in this example from w3schools: https://www.w3schools.com/css/tryit.asp?filename=trycss_css_image_overlay_fade

 

Everything in .overlay decides the color and such of the box, while .container:hover .overlay decides the opacity of that box.

In general I think this is the sort of page of information you're looking for: https://www.w3schools.com/css/css3_images.asp

Including it showing options such as making the image grayscale.

[bowrilla]

Well, it depends on what you want to do.

 

First, there's the css filter property, which offers stuff like saturation, greyscale, contrast, etc and they are animatable. IE doesn't work though and might clash with the old proprietary IE filter property. You'll apply those filters overall and the only option I could think of in order to partially apply it would be to display the same image multile times stacked ontop and using the css mask property. That's pretty messy though.

 

The next option would be to not use the image within an <img> (old school and outdated) or <picture> (the modern way to go) tag but to apply it as a background image. That way you can simply switch out the image on :hover. However that is not animatable so it will be a hard transition.

 

Another option for a switch between images that is animatable is stacking the two images and setting opacity on :hover to 0. That can be easily animated.

 

With React (and other frameworks) you could also switch out the image when the cursor is on top of the object.

 

Pick your poison.

[stefanmz]

1 hour ago, bowrilla said:

Well, it depends on what you want to do.

 

First, there's the css filter property, which offers stuff like saturation, greyscale, contrast, etc and they are animatable. IE doesn't work though and might clash with the old proprietary IE filter property. You'll apply those filters overall and the only option I could think of in order to partially apply it would be to display the same image multile times stacked ontop and using the css mask property. That's pretty messy though.

 

The next option would be to not use the image within an <img> (old school and outdated) or <picture> (the modern way to go) tag but to apply it as a background image. That way you can simply switch out the image on :hover. However that is not animatable so it will be a hard transition.

 

Another option for a switch between images that is animatable is stacking the two images and setting opacity on :hover to 0. That can be easily animated.

 

With React (and other frameworks) you could also switch out the image when the cursor is on top of the object.

 

Pick your poison.

well I chose the third option ,with the hover and opacity. Thanks! That was a very helpful and resourceful answer