Hover Effect for Images

.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);
}

How to integrate CSS-Styles in adoc Studio

  1. Create a new product style (recommended)

  • Duplicate an existing product style

  • Integrate the new CSS code into the duplicated stylesheet

This variant ensures a consistent appearance and simplifies subsequent changes, as all documents use the same centrally maintained style.

  1. Project-specific stylesheet

  • Create a styles.css file in the project.

  • Above the document title of each AsciiDoc document concerned, write the line

:stylesheet: styles.css

Learn more in our CSS documentation in the user manual.

Click Effect on KBD Macro

Previous

Rainbow Scrollbar

Next