.imageblock img {
transition:
transform 0.4s ease-in-out,
box-shadow 0.4s ease-in-out,
filter 0.4s ease-in-out;
will-change: transform, box-shadow, filter;
}
/* Image rotation & glow on hover */
.imageblock:hover img {
transform: scale(1.05) rotate(1deg);
box-shadow:
0 0 50px rgba(0, 255, 255, 0.5),
0 0 100px rgba(139, 0, 255, 0.3);
filter: contrast(1.2) saturate(1.2);
}Hover Effect for Images
Add an interactive hover effect to images with rotation, scale, glowing box shadows, and enhanced contrast/saturation filters.
Screenshots
1 / 2
Learn more about CSS styling
Learn how to integrate CSS styles in adoc Studio in our documentation.