<figure>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jellyfish.jpg" alt>
  <figcaption>
    <strong>Turritopsis nutricula</strong> is a hydrozoan that can revert from mature jellyfish to its polyp stage in recursive cycles, effectively making the animal immortal.
  </figcaption>
</figure>
<svg id="svgpath">
  <defs>
    <clipPath id="large" clipPathUnits="objectBoundingBox">
      <polygon points=".15 .05,.6 .05,.6 .4,.15 .4" />
    </clipPath>

    <clipPath id="med" clipPathUnits="objectBoundingBox">
      <polygon points=".15 .05,.6 .05,.6 .6,.15 .6" />
    </clipPath>

    <clipPath id="small" clipPathUnits="objectBoundingBox">
      <polygon points=".15 .05,.6 .05,.6 .8,.15 .8" />
    </clipPath>

  </defs>
</svg>
@font-face {
  font-family: 'Calluna Sans';
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/CallunaSansRegular.otf') format('otf');
}

* {
  box-sizing: border-box;
}

body,
figure {
  margin: 0;
  padding: 0;
  background: #003;
}

figure {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jellyfish.jpg);
  background-size: cover;
  position: relative;
  font-family: Calluna Sans, sans-serif;
  color: #fff;
  text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.6);
  width: 60%;
  margin: 0 auto;
  font-size: 0;
}

figure img {
  width: 100%;
  filter: blur(0px);
  clip-path: url(#large);
  clip-path: polygon(15% 5%, 60% 5%, 60% 40%, 15% 40%);
}

figcaption {
  position: absolute;
  top: 6%;
  left: 18%;
  width: 40%;
  line-height: 1.4;
  font-size: 1.6rem;
  opacity: 0;
  transition: .4s .2s opacity;
}

figure img {
  transition: .6s filter;
}

figure:hover img {
  filter: blur(8px);
}

figure:hover figcaption {
  opacity: 1;
}
#svgpath { width: 0; height: 0; }
@media all and (max-width: 1200px) {
  figure img {
    clip-path: url(#med);
    clip-path: polygon(15% 5%, 60% 5%, 60% 60%, 15% 60%);
  }
}

@media all and (max-width: 1000px) {
  figure {
    width: 100%;
  }
}

@media all and (max-width: 600px) {
  figcaption {
    font-size: 1.2rem;
  }
}

@media all and (max-width: 500px) {
  figure img {
    clip-path: url(#small);
    clip-path: polygon(15% 5%, 60% 5%, 60% 80%, 15% 80%);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.