# 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.

- Type: PHP
- Runs: Run everywhere
- Category: [Block Editor](https://wpide.com/library/category/gutenberg/)
- Tags: block-styles, images, design
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/block-styles-images/

## Code

```php
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 use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Image Block Styles: Polaroid, Frame and Tilt" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/