Opacity/black and white
- The topic ‘Opacity/black and white’ is closed to new replies.
Need help? Check out our Support site, then
Hi,
When you hover over the square thumbnail, and previews the feature image, is there a way to change the opacity or make it black and white or add a tint of colour?
Thanks!
Hi.
You can use the following css code:
.image-info { background: rgba(0, 0, 0, 0.7); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
Note: You need to have the Custom Design upgrade to use css code.
Thank you, very useful, is there a way to change the values of the actual image and not the image info?
and specific images, not all of them. Thank you
Here’s what you can do to make images black and white on hover ( it should work in modern browsers ):
.entry-image:hover img { filter: grayscale(100%); -webkit-filter: grayscale(100%); filter: gray; -webkit-transition: all .6s ease; }
You can also apply the change to specific images. Open the page source in the browser and check the article class attribute. Here’s what the code looks like if I want to apply the change to the first image on the demo site ( http://nexusdemo.wordpress.com/ ):
.entry-image.post-276:hover img { filter: grayscale(100%); -webkit-filter: grayscale(100%); filter: gray; -webkit-transition: all .6s ease; }
Thank you but it doesnt seem to be working, any ideas? Is it because i am using firefox?
Thanks
Could you, please, post your site url?