Image Block Styles: Polaroid, Frame and Tilt
Adds three photo styles to the Image block: a white polaroid card, a thin inset frame, and a playful slight tilt that straightens on hover.
Opens WPIDE on
Code
add_action( 'init', function () {
$styles = array(
'wpide-polaroid' => array( 'Polaroid', '.wp-block-image.is-style-wpide-polaroid img{background:#fff;padding:10px 10px 36px;box-shadow:0 4px 16px rgba(0,0,0,.15);}' ),
'wpide-frame' => array( 'Frame', '.wp-block-image.is-style-wpide-frame img{padding:8px;border:1px solid rgba(0,0,0,.2);outline:1px solid rgba(0,0,0,.08);outline-offset:-5px;}' ),
'wpide-tilt' => array( 'Tilt', '.wp-block-image.is-style-wpide-tilt img{transform:rotate(-2deg);transition:transform .3s ease;box-shadow:0 6px 18px rgba(0,0,0,.15);}.wp-block-image.is-style-wpide-tilt img:hover{transform:rotate(0);}@media (prefers-reduced-motion:reduce){.wp-block-image.is-style-wpide-tilt img{transition:none;}}' ),
);
foreach ( $styles as $name => $style ) {
register_block_style( 'core/image', array(
'name' => $name,
'label' => $style[0],
'inline_style' => $style[1],
) );
}
} );Notes
The tilt animation is skipped for visitors who prefer reduced motion.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.