CSS Masks Examples | CSS: Presentation Layer

Standards Based Development

The img below is a css mask. Make sure you :hover over it.

Markup and Styles

// css
.cutout{
  -webkit-mask:
  url("http://dev.bowdenweb.com/css/ex/masks/i/css-mask-heartmask.png") 
  no-repeat 
  center center;
}
.cutout.pulse:hover{
-webkit-animation-name: pulsed;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction:alternate;
-webkit-mask-size: auto 100%;
}
@-webkit-keyframes pulsed {
0% { -webkit-mask-size: auto 100%; }
100% { -webkit-mask-size: auto 90%; }
}

// html
<img 
class="cutout pulse" 
src="http://dev.bowdenweb.com/css/ex/masks/i/css-mask-periwinkle.jpg" 
alt="" />

CSS Masks in WebKit