CSS Page Peel Box

[divider line_type=”No Line” custom_height=”20″]

MouseOver block with page peel — Entirely CSS

My latest bit of code is for a mouse-over box used as a link. “block_link”. I wanted to build an effect using purely CSS to deliver a box shadow and image opacity effect and I believe it turned out pretty nice. I also like the benefit that it makes handheld devices stagger a second while scrolling. It helps signal the link.

The examples can be seen on the Salvatori’s homepage: https://salvatorisitalian.com/.

Please feel free to play with the code and see what you come up with. Note: I had to change the background color of the page to show the transparency effect. It was designed to highlight on a colored or textured background.

[image_with_animation image_url=”310″ alignment=”center” animation=”Fade In” img_link_target=”_self” el_class=”block_link”]

Entire block acts as link

[divider line_type=”No Line” custom_height=”20″]

.block_link { position: relative; color: #000; background-image:url(http://designservicesfortwayne.com/wp-content/uploads/2014/09/ffffff63.png); /* ffffff33 denotes a white image at 63% opacity */ /* The image is only a few pixels in size, so it is repeated */ background-repeat:repeat; } .block_link:hover{ background-image:url(http://designservicesfortwayne.com/wp-content/uploads/2014/09/ffffff33.png); /* ffffff63 denotes a white image at 33% opacity */ background-repeat:repeat; } .block_link:before { content: ""; position: absolute; top: 0; right: 0; border-width: 0 16px 16px 0; border-style: solid; border-color: #ffffff #6d6a88; } .block_link:hover:before { content: ""; position: absolute; top: 0; right: 0; border-width: 0 32px 32px 0; border-style: solid; border-color: #fff #6d6a88; } </div>

CSS Page Peel Box

CSS Page Peel Box

MouseOver block with page peel — Entirely CSS

Related Posts

Embedded Scaled Website