Image Blurs

Add CSS3 Blur filters to your Essential Grid images

1. Blurred image to regular image on hover

back to menu
  • Beach Vacation
  • Coffee and Cookies
  • Dinner Preparations
  • Leather Gloves
  • Premium Watch
  • Short Break
To use, copy the following CSS over to your Grid's CSS Editor

Normally when a CSS3 blur filter is applied it creates “soft” edges as shown in this example. But crisp edges in the example above are achieved with an “inset border” trick using the :before and :after pseudo elements. This works by matching the border’s color with the page content’s main background color.  And then also by reducing the Item Spacing between elements, as the border will effectively serve as the visual spacing instead.

After copying the CSS below over to your Item Skin Editor’s CSS Editor, adjust all occurances of “.eg-washington-” with your skin’s Class Prefix. Then adjust the “background-color” part to match your page content’s background color.

2. Regular image to blurred image on hover

back to menu
  • Beach Vacation
  • Coffee and Cookies
  • Dinner Preparations
  • Leather Gloves
  • Premium Watch
  • Short Break
To use, copy the following CSS over to your Grid's CSS Editor

Normally when a CSS3 blur filter is applied it creates “soft” edges as shown in this example. But crisp edges in the example above are achieved with an “inset border” trick using the :before and :after pseudo elements. This works by matching the border’s color with the page content’s main background color.  And then also by reducing the Item Spacing between elements, as the border will effectively serve as the visual spacing instead.

After copying the CSS below over to your Item Skin Editor’s CSS Editor, adjust all occurances of “.eg-washington-” with your skin’s Class Prefix. Then adjust the “background-color” part to match your page content’s background color.