Hover Effect to Image

  • Author
    Posts
  • #163020

    letdesignbar
    Member

    Hello,

    I want to add a hover effect to the front page image, similar to the hover effect for porfolio items in the portfolio section.

    how can i do

    Thanks

    The blog I need help with is lets-design.art.

    #163029

    tarasdashkevych
    Theme Author

    Hello,

    The portfolio section uses a special structure along with custom styles to have the hover effect.

    The section above the portfolio on your front page, uses regular Image blocks and the Columns block to display a grid. By default, these blocks do not provide such hover effect.

    You can add this custom CSS to have a hover effect on your images but you cannot have the same effect as it’s shown in the portfolio section:

    
    .home .wp-block-column .wp-block-image:hover img {
      opacity: 0.5;
    }
    
    .home .wp-block-column .wp-block-image:hover {
      background: #000;
    }
    

    Please let me know if you have any additional questions.

    Kind regards,
    Taras

    #163035

    letdesignbar
    Member

    Perfect!. Thank you so much.

    But i have another question

    is possible to add hover effect to Image on Posts and Pages ?

    #163060

    tarasdashkevych
    Theme Author

    If you want to have a hover effect for other blocks on your site then you can add a custom CSS class to your block, for example, image-hover, and then also add this custom CSS style to create a custom hover effect on your site:

    
    .image-hover img:hover {
      opacity: 0.5;
    }
    

    – Here is a guide on how to add a custom CSS class to your block: https://wordpress.com/support/adding-additional-css-classes-to-blocks/#adding-an-additional-css-class

    – Here is a guide on how to add a custom CSS styles to your site: https://wordpress.com/support/editing-css/

    Hope this helps. Please let me know if you have any additional questions.

    Kind regards,
    Taras

    #163065

    letdesignbar
    Member

    That worked perfectly! Thank you so much.

    #163070

    tarasdashkevych
    Theme Author

    You are very welcome! :)

    Kind regards,
    Taras

The topic ‘Hover Effect to Image’ is closed to new replies.