Black and white / coloured image effect
-
Hello,
I would like to create a Black and White Image effect. In specific, I want that the “mosaic” images (I use Pictorico theme) from black and white become couloured when I pass on it with the mouse.
Can you help me?The blog I need help with is: (visible only to logged in users)
-
Hi there,
We can use CSS3 filter, but I’m afraid it won’t work for old browsers. Please add this css to make the change;
.entry-thumbnail img{ -webkit-transition: width 400ms; -moz-transition: width 400ms; transition: width 400ms; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%); } .entry-thumbnail:hover img{ -webkit-filter: grayscale(0); -moz-filter: grayscale(0); filter: grayscale(0); } -
-
Oops sorry, please remove width value on transition attribute and change 400ms to 800ms. It should has transition effect.
It goes like this;
.entry-thumbnail img{ -webkit-transition: 800ms; -moz-transition: 800ms; transition: 800ms; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%); }Keep style on .entry-thumbnail:hover img.
-
-
- The topic ‘Black and white / coloured image effect’ is closed to new replies.