Image who changes of color when I pass over

erablor · Member · Apr 11, 2017 at 2:59 pm
Copy link

Add topic to favorites
Hi,
I would like to know if it’s possible to do some HTML for having a picture that chage color when a pass over. For exemple my picture is black and white but when I pass over, she become in color. Is it possible ? Thanks

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Apr 12, 2017 at 6:11 am
Copy link
Hi there, can you point me to the page or post where you want to do this and let me know which image? If the theme does not have this feature already, it can be a bit tricky to do this. Generally what you would have to do is to create a like image in color, or tinted the way you want it and upload that to your media library. We can then use a bit of CSS to make the original image invisible and have the other image appear in its place.

If you wish to give this a try, create your hover image and upload it to your media library and let me know when, and where you would want that image swap to take place and I’ll work out the code for you.
erablor · Member · Apr 12, 2017 at 7:50 pm
Copy link
Hi,

This is the page where I would like to have my flotter image.

https://erablor.wordpress.com/a-propos/

You will see the picture in black and with of a tap and it’s written Biologique. I would like to have the picture in color when my computer mouse goes over the picture.

Thanks
thesacredpath · Member · Apr 12, 2017 at 11:36 pm
Copy link
Hi, and thanks for the info. There are a couple ways we can do this. The first is with the following CSS. What we have done is to set a background image in the Biologuique image parent div. Then we set an opacity for your original image of 1, and then in the hover, we set the opacity to 0 (completely transparent). In this way, when you hover over the image you inserted, it goes invisible and the background image shows through.
```
.page-id-2 span.wp-image-346 {
	background: url('https://erablor.files.wordpress.com/2017/03/entaille.png?w=760') no-repeat scroll center top / cover;
}
.page-id-2 span.image-container img.wp-image-346 {
	opacity: 1;
	-webkit-transition: opacity 0.5s ease-in-out;
	-moz-transition: opacity 0.5s ease-in-out;
	-o-transition: opacity 0.5s ease-in-out;
	transition: opacity 0.5s ease-in-out;
}
.page-id-2 span.image-container img.wp-image-346:hover {
	opacity: 0;
}
```
You will notice that on the image I pulled from your media library (the first CSS rule above) that it is a bit wider than the other image. What you will want to do is to create an exact duplicate of the grayscale image you have, upload that to your media library and then replace the URL in the background declaration in the first rule above with the URL of that color image. Give the above a try and see what you think.

The other way of doing this is for you to insert a color image directly into your content, replacing the existing grayscale image. We can then use CSS to change that image to grayscale when it is static, and remove the filter and let it show in color when you hover. Doing it this way will mean the text you have over the image will be grayscale as well when static, and then will go color along with the image when hovered. If you wish to do this, prepare and insert the color image and let me know and I can work out the CSS for you.

No items found.