How can I add a hover effect into a featured image?

Asked on December 20, 2015 in Customization.

Hi, I’m trying to add a hover effect in my featured images but I can’t. Can somebody help me? I found some information about it but I’m not into coding so is hard for me.

mariana.fiblanc Layers User
Reply
  • Possible Answers to Your Question:

  • 1 Answer(s)
    Answered on January 4, 2016.

    Hi there,

    To do it without coding, I urge you to checkout what plugins are available under Plugins > Add New by searching for “featured thumbnail hover”or similar.  It is worth experimenting with what they can or cant do as coding will take more time and we will not be able to provide you with the code or coach you in much detail on how to go about it.

    The following tutorial covers how to add one effect type to the images in Layers. Using this technique, you can replace the zoom effect with any other:
    https://docs.layerswp.com/doc/how-to-add-inline-image-zoom-to-posts-with-css/

    The basics are that you need to target the img element in the CSS with this class:

    
    .layers-post-page .thumbnail img:hover{}
    
    

    Finding this class takes a basic understanding of how to use your Browser inspector. This is essential if you want to be able to customize your site without using plugins and extensions.

    https://docs.layerswp.com/doc/how-to-customize-your-site-with-css/

    With the above class, you can add  any style to the hover state of the image, or a filter such as those covered here:

    filter

    Reply