Opacity/black and white

Premium Theme Support › Elegant Themes › Nexus

• Author
  Posts
• March 28, 2014 at 3:38 pm #48490
  mdcft

  Member

  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!

  March 28, 2014 at 3:51 pm #48674
  yuriyportnykh

  Theme Author

  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.

  March 28, 2014 at 5:14 pm #48690
  mdcft

  Member

  Original poster

  Thank you, very useful, is there a way to change the values of the actual image and not the image info?

  March 28, 2014 at 5:16 pm #48691
  mdcft

  Member

  Original poster

  and specific images, not all of them. Thank you

  March 28, 2014 at 5:23 pm #48692
  yuriyportnykh

  Theme Author

  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; }

  March 31, 2014 at 3:57 pm #48769
  mdcft

  Member

  Original poster

  Thank you but it doesnt seem to be working, any ideas? Is it because i am using firefox?
  Thanks

  March 31, 2014 at 7:16 pm #48781
  yuriyportnykh

  Theme Author

  Could you, please, post your site url?

• The topic ‘Opacity/black and white’ is closed to new replies.