Premium Theme Support › Elegant Themes › Nexus

Opacity/black and white

  • Author
    Posts
  • #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!

    #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.

    #48690

    mdcft
    Member

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

    #48691

    mdcft
    Member

    and specific images, not all of them. Thank you

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

    #48769

    mdcft
    Member

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

    #48781

    yuriyportnykh
    Theme Author

    Could you, please, post your site url?

  • Author
    Posts

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