Hover Effect to Image
-
AuthorPosts
-
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
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,
TarasPerfect!. Thank you so much.
But i have another question
is possible to add hover effect to Image on Posts and Pages ?
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,
TarasThat worked perfectly! Thank you so much.
You are very welcome! :)
Kind regards,
Taras -
AuthorPosts
The topic ‘Hover Effect to Image’ is closed to new replies.