Masking

Use CSS shapes to mask an image. For this shape in particular, a square image is needed to fill all corners of the transparent graphic.

Code Example

    <style>
     .mask {
      width: 300px;
      height: 300px;
      padding: 10px;
      background-image: url(../images/surfer-square.jpg);
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/sun.svg);
      mask-size: 300px;
      mask-repeat: no-repeat;
      mask-position: center;
      float: none;
      margin: 0 auto;}
    </style>