help please – is there any way to create hover effects for images on wordpress [ad_1]either using css or a free plugin. I could do it if i could use css freely but it won't let me target the different elements e.g. in a cover block [ad_2] Previous ArticleBug – Emoji and response Next ArticleCannot create full width container in posts
Many plugins available with this: [https://wordpress.org/plugins/search/image+hover/](https://wordpress.org/plugins/search/image+hover/)Which theme are you using? You should be able to add CSS via the customizer, or with Gutenberg: [https://gutenberghub.com/how-to-apply-custom-css-to-any-gutenberg-block/](https://gutenberghub.com/how-to-apply-custom-css-to-any-gutenberg-block/)
You can easily give the images or the container they are in a custom class. Select the image or container and under “advanced” dropdown, “Additional CSS class(es)”, and then use that for a hover effect. Maybe using [filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) and/or [transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform).example CSS: .custom-class img:hover { filter: contrast(150%) hue-rotate(-20deg); transform: scale(1.1); transition: all 0.5s; } .custom-class img { transition: all 0.5s; }
Many plugins available with this: [https://wordpress.org/plugins/search/image+hover/](https://wordpress.org/plugins/search/image+hover/)
Which theme are you using? You should be able to add CSS via the customizer, or with Gutenberg:
[https://gutenberghub.com/how-to-apply-custom-css-to-any-gutenberg-block/](https://gutenberghub.com/how-to-apply-custom-css-to-any-gutenberg-block/)
You can easily give the images or the container they are in a custom class. Select the image or container and under “advanced” dropdown, “Additional CSS class(es)”, and then use that for a hover effect. Maybe using [filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) and/or [transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform).
example CSS:
.custom-class img:hover {
filter: contrast(150%) hue-rotate(-20deg);
transform: scale(1.1);
transition: all 0.5s;
}
.custom-class img {
transition: all 0.5s;
}