<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2074 1382">
  <defs>
    
    <style>
      .hover-path { fill: transparent; }
      
      #grayscalePhoto,
      .hover-photo { pointer-events: none; }
      
      a .hover-photo { opacity: 0; transition: opacity 400ms ease-in-out 100ms; } 
      a:hover .hover-photo { opacity: 1; transition-delay: 0; }
     
    </style>
    
    <filter id="grayscaleFilter">
      <feColorMatrix in="SourceGraphic" type="saturate" values="0"/>
    </filter>
    
    <image id="photo" width="2074" height="1382" xlink:href="http://thenewcode.com/assets/images/team-photo.jpg"/>
    
    <use id="grayscalePhoto" xlink:href="#photo" filter="url(#grayscaleFilter)"/>
    
    <path id="konni-path" d="M427.7 450.3c26.5-.7 33.6 9.4 46 22-4.3 20.4-6.2 42.5-15 59-7.2 13.5-23 12.3-18 34 17.4 7.9 42.2 7.1 50 26 3.9 14.7-10.5 30.1-15 42-12.5 32.9-31.3 103.1-2 130.1-2.7 6.6-5.2 12.6-10 19-3.7.3-7.3.7-11 1 .3.7.7 1.3 1 2 2 1.7 4 3.3 6 5-15.8 40.4-35.2 84.1-25 145.1 2.3 13.9-4.5 23.9-3 32 4.8 26-1.9 55.9-4 77-.3 16-.7 32-1 48-3.2 11.3-9.1 15.4-17 22-12.7 10.6 4.9 54.8-31 46-12.1-3-36.6-16.2-40-28-6.1-20.7 14.7-31.1 19-43-1-7.7-2-15.3-3-23 8.5-43.5 4.2-94.4 12-142.1 4-24.6 9.4-72.3-5-87-18.9.8-37.8 1.9-50-6-3.1 4.8-13.4 8.7-18 12 .6 5.8-19.6 25.7-25 34-9.1 14.1-10.6 47.5-15 63-12.6 44.3-13.8 94.2-26 134.1-2.7 8.6 2.7 16.6-2 24-13.8 21.5-49.8 24.4-75 35-22.7 9.5-51.5 19.8-79 9-2.7-12.6-2.1-15.1 4-23 13-4.1 45.3-27.8 50-39 3.1-7.3.8-12 4-17 5.3-1.3 10.7-2.7 16-4 3.2-8-.2-18.3 3-26 17.7-42.7 23.9-108.3 34-159.1 5.4-27 4.5-52.3 16-73 15.3-27.4 64.8-23.2 90-41v-1c-1.7-1-3.3-2-5-3 2-1.3 4-2.7 6-4-5.8-15.8-.6-39.9 3-55 1.3-15.7 2.7-31.3 4-47 8.8-36.4 37.9-92.6 79-84 26.1-18 9.4-33.6 14-61 1.5-9 7.5-14.8 11-21l3-15c4.3-9.7 16.1-13 24-19.1z"/>
    
    <mask id="konni-mask">
      <rect width="100%" height="100%" fill="#FFF"/>
      <use xlink:href="#konni-path"/>
    </mask>
    
    <path id="carlo-path" d="M773.5 512.9c29 .1 53.2 23.2 45 58-3 12.5-16.2 24.3-9 42 7.2 17.9 31 29.3 41 47 12.3 21.7 21.8 52 27 78 4.9 24.5 3 40.1 11 60 6.1 15.1 24.7 19.6 30 35 .3 8.7.7 17.3 1 26 2.3 13.3 4.7 26.7 7 40 .3 22.7.7 45.3 1 68 1.7 11.7 3.3 23.3 5 35 3.1 8.6 9.6 16.2 11 28 1.2 10.5-6.4 21-3 34 21.3-.7 29.8 4.2 34 25-.3 5-.7 10-1 15 1.7 4.5 17.4 24.5 22 33-8.5 19.2-27.1 8.4-43 0-11.7-6.2-22.3-9.2-36-15-5.9-2.5-53-45.7-56-52 6.7-8.8 9.4-18 3-27-15.4 10.8-32 11.1-54 12-4 19.1 14.5 29.7 11 49-3.3 7.3-6.7 14.7-10 22-2.4 7.4.2 16.4-3 25-5.5 14.6-30 36.7-50 37-23-12.7-2.1-51.6-13-76-5.3-3.3-10.7-6.7-16-10 1.3-1.7 2.7-3.3 4-5 3.3-2.7 6.7-5.3 10-8-14.7-57-34.6-99.4-48-158.1-1.7-20.3-3.3-40.7-5-61 1.1-4.4 5.2-10.8 4-18-4.3-10-8.7-20-13-30-3.4-13.4 6.7-21.4 5-31-3.7-21.6-16.1-12.9-9-47 1.7-19.3 3.3-38.7 5-58 2.7-5 5.3-10 8-15 5.8-18.1-14.2-41.2 9-48-1.2-8.6-2.7-10.6 3-15 10.8-10.9 30.4-12.8 41-24-11.8-20.3 4.8-43.2 7-62 8.5 1.5 18.3-4.1 24-8.9z"/>
    
    <mask id="carlo-mask">
      <rect width="100%" height="100%" fill="#FFF"/>
      <use xlink:href="#carlo-path"/>
    </mask>
    
    <path id="hendrick-path" d="M921 555.2c24.7-.7 32 8.7 44 20 .3 32.4 5 52.2 17 73 18.6 3 52.2 5.3 64 14 3 29-18.4 77-25 108-9 41.9 12.5 49.5 9 78-17.8-2.6-76.2 5.1-86 1-12.4-5.1-18.5-21.6-25-33-15.1-26.7-34.4-54.8-45-84-5-13.9-2.5-25.5-7-41-4.6-15.7-16.1-14.5-16-43l13-13 21-6c1.3-7 2.7-14 4-21 5.4-15.9 16.3-33 17-47l15-6z"/>
    
    <mask id="hendrick-mask">
      <rect width="100%" height="100%" fill="#FFF"/>
      <use xlink:href="#hendrick-path"/>
    </mask>
    
    <path id="heinz-path" d="M1203.7 569.3c5 1.7 10 3.3 15 5 4.3 15 9.1 25.4 9 46-2.7.7-5.3 1.3-8 2 .6 16.4 38.8 27 47 48 8.8 22.4-7.8 50.7-11 69s5 30.5 8 41c5.3 18.7-3.1 40.1-8 55-7.3 1.2-19.1 1.8-25-1l-3-12c4.8-4.1 8.6-7.2 9-16l-12-12c-9.8-3.4-16.2.6-26 2 .3-1 .7-2 1-3 17.5-12.7 59.1-51.9 40-80-6.3-3-12.7-6-19-9-18.7 11.1-33.8 28.5-59 32l-6-18c7.5-6.1 9.6-21.6 7-32-10-7.3-20-14.7-30-22l12-12c7.4-14.8 29.3-16.1 33-34-7.4-6.8-7.8-19.9-5-33 10.4-5.3 19.8-10 31-16z"/>
    
    <mask id="heinz-mask">
      <rect width="100%" height="100%" fill="#FFF"/>
      <use xlink:href="#heinz-path"/>
    </mask>
    
    <path id="tobsen-path" d="M1080.8 569.3c15.5-.3 20.9 12.8 28.4 20 1 27.7 2.3 37.2-10.7 53.8.7 4.7 1.3 9.3 2 14 24.6 8.1 55.3 19.1 61 46 3.8 18.1-17.5 35.6-3 50 1 .3 2 .7 3 1 12.8-17.1 36.4-41.7 64-43 7.4 3.6 14.8 7.1 18 15 8.7 32.5-38.2 65.3-56 78 1 .7 2 1.3 3 2 10.9 2.9 28.5-9.2 36-5 2 1.7 4 3.3 6 5 .4 39.9-41.3 41.5-76 39-5 .3-10 .7-15 1-4.3-1.3-6.6-5.9-13-6-14.9-.3-24.4 6-37 9-28.2 6.7-61-14.1-69-32-5.5-20.1 4.2-44.5 7-60 .7-12 1.3-24 2-36 8.8-21.3 17.4-22.7 19-49-4.3-3.3-8.7-6.7-13-10h2c6.3-6.5 17.8-7.4 21-17 3.5-10.5-3.3-15.7-6-23-8.4-23 15-46.6 26.3-52.8z"/>
    
    <mask id="tobsen-mask">
      <rect width="100%" height="100%" fill="#FFF"/>
      <use xlink:href="#tobsen-path"/>
    </mask>
    
    <path id="jan-path" d="M1323.2 569.3c18.2-.1 20.2 9.5 31 16 .3 19.3.7 38.7 1 58 15.9 11.3 37.9 17.3 46 36 1 9.3 2 18.7 3 28 3.2 13.6 12.4 30 17 42 2 5.2.1 11.4 2 15 24.6 5.1 38.9 1.1 52 27-2 18.2-7.2 31.3-11 45-11.3 40.6-9.2 84.3-32 112 4.2 24.9 10.4 49 3 77-2 .3-4 .7-6 1-9.3-3.7-14.3-9.8-22-15h-3c-7.6 27.7 1.5 64.2-37 64-9.6-11.7-14.4-26.7-17-46 .3-5 .7-10 1-15-12.9-21.3-17.7-40.6-29-68-8.3-14.7-16.7-29.3-25-44-8.8-18.7-11.5-37.7-19-58-7.6-20.5-20.2-42.3-15-68-.7-12-1.3-24-2-36-4.6-42.4 6.9-83.6 36-96 5-.3 10-.7 15-1 3.8-29.7-22.1-54 11-74z"/>
    
    <mask id="jan-mask">
      <rect width="100%" height="100%" fill="#FFF"/>
      <use xlink:href="#jan-path"/>
    </mask>
    
    <path id="rouven-path" d="M1637 492.8c34.1 1.9 70.3 37 63 74-8 5.7-16 11.3-24 17 26.7 4 72.8 46.3 81 69 6.9 19.1 3.9 116.5-1 139.1-4 18.2-12.7 28.9-19 42l-3 24-9 3c-5.3 12-10.7 24-16 36-2.7 19-5.3 38-8 57-5.7 16-11.3 32-17 48-3 18.7-6 37.3-9 56-8 19.7-16 39.3-24 59-2.3 12-4.7 24-7 36-4 4.3-8 8.7-12 13-1.3 7-2.7 14-4 21-4.3 2.7-8.7 5.3-13 8-10.3 14.6-5.5 41.9-17 55-11.7 13.4-38.9 17-45-4-3.1-10.7 4.4-18.8 6-27-10.4 5.4-21.5 15.3-36 13 1-15.3 2-30.7 3-46-4.7-10-9.3-20-14-30-1.9-9.8.9-20.6-4-27-6.8 4-9.9 1.6-17-1 1-4.7 2-9.3 3-14 2.3-1.3 4.7-2.7 7-4 4 1.7 8 3.3 12 5 0-61.3 8.7-105.1 2-166.1-5.3 1.8-7 5.9-13 4l-5-5c-1.6-19.5 6.5-15.4 18-12-4.4-31 14.8-58.4 21-82-.7-6.3-1.3-12.7-2-19 3.7-3.3 7.3-6.7 11-10 .3-10.7.7-21.3 1-32 7.7-29.3 15.3-58.7 23-88 3.9-18.8 1.3-39.3 8-55 8.7-20.5 40.6-40.2 58-53-7.7-18.3-14.2-26.4-28-38l3-6-6-6c.7-2.7 1.3-5.3 2-8h8c.3-.7.7-1.3 1-2v-3c-3.3-2.7-6.7-5.3-10-8 .3-2 .7-4 1-6 6.4-13 18.7-19.4 31-27z"/>
    
    <mask id="rouven-mask">
      <rect width="100%" height="100%" fill="#FFF"/>
      <use xlink:href="#rouven-path"/>
    </mask>
    
    <path id="jule-path" d="M1758.8 498.3c38.2 1.9 47.2 17.5 56 48 3.3 11.2-5.5 13.9 0 23 3.9 4.6 10.7 3.6 16 7 3.3 4.3 6.7 8.7 10 13 16.5 10.4 42.7 4.5 59 17 28.1 21.5 47.2 104.6 58 145.1 5.4 20.3 12.2 54 6 79-3.7 9-7.3 18-11 27-4 15.5 6.6 26.5 9 38-.7 17.3-1.3 34.7-2 52 2.3 3.3 4.7 6.7 7 10 3.1 7.6-1.8 15.5 2 19 2 1.3 4 2.7 6 4 4.7-4.5 19.7-20.4 26-5 3.8 9.5-7.2 32.5-12 39-8 2.5-14.1 2-20-2l-5 5c-11.6 45.5 4.6 117.7-12 160.1 14.4.4 16.9-4.6 24-11 22.3 1.7 15.6 22.6 1 28 .6 15.4-2.3 26-10 33l-15-9c-2.3.7-4.7 1.3-7 2-4.6 19.8-13.5 46.7-30 55 6.7-17.3 13.3-34.7 20-52 5-82.3 10-164.8 15-247.1-5.3-19.7-10.7-39.3-16-59-3.7-3.3-7.3-6.7-11-10-.3-6-.7-12-1-18-3.3 2-6.7 4-10 6 .1 32-1.1 67.5-8 95-6 19.7-12 39.3-18 59-3.2 17.1 4.7 28.9 7 43 2 35.7 4 71.3 6 107-3.3 3.7-6.7 7.3-10 11-9.3 28 8.8 63.9-18 74-16.8 7.4-32.4-14.2-32-29-21.3 17-5.6 64.4-47 64-5.3-3.7-10.7-7.3-16-11-6.7-32.4 14.7-36.4 20-58 5.6-22.8-15-37.4-12-59 4.9-35.1 3.1-44.9-2-77-.7-23-1.3-46-2-69-6.3-27.3-12.7-54.7-19-82-3.5-18.7 7.2-35.4 2-53-5-16.9-25.4-16.1-30-42-7.1-39.7 18.7-69 25-100-.3-36-.7-72-1-108-1.7-7.3-7.4-15.3-5-27 3-14.2 12.1-25.1 18-37-13.3-26-19.2-32.3-46-45 .3-1 .7-2 1-3 2.3-7.2 9.7-7.4 12-13-.3-4.3-.7-8.7-1-13 3.7-12.5 13.7-17.1 23-24.1z"/>
    
    <mask id="jule-mask">
      <rect width="100%" height="100%" fill="#FFF"/>
      <use xlink:href="#jule-path"/>
    </mask>
    
    <path id="hans-path" d="M577.6 466.4c14.8 3.4 29.6 6.7 44.4 10.1 11.9 7.7 18.5 46.3 11.1 67.6-2.2 6.2-9.7 13.2-13.1 20.2 12.1 22.4 39.8 33.1 53.4 54.4 13.7 21.5 11.7 125.5-2 147.2-9.7 6-19.5 12.1-29.2 18.1.3.7.7 1.3 1 2 7.7 2.7 15.5 5.4 23.2 8.1.5 21.2 11.8 41.6 17.1 60.5-.3 10.4-.7 20.8-1 31.3 3 7.7 6.1 15.5 9.1 23.2.7 52.1 1.3 104.2 2 156.3-3.3 18.9-9.6 34-3 55.5 3.3 10.7 16.5 14 22.2 24.2 1.9 6.2.1 11.4-2 16.1-27.1 8.5-27.8 7.1-50.4-3-13.2-5.9-37 .3-44.4-11.1-6.3-9.7 2.8-19.6 0-34.3-2.4-9.7-4.7-19.5-7.1-29.2-4.5-25.4 2.5-53.7 6-73.6 3.9-21.9-1.1-43-4-60.5-2.5-14.8 3.8-29.7 1-42.3-5.5-25.4-35.3-69.8-69.6-63.5-15.3 11.7-7.6 27.6-13.1 50.4-7.2 29.5-24 66.6-17.1 107.9 2.7 16.1 5.4 32.3 8.1 48.4v72.6c2 6.7 12.2 11.5 10.1 20.2-5.6 13.2-102.1 40.9-119 31.3-.7-1-1.3-2-2-3 4-9.1 9.9-8.6 15.1-15.1 10-12.3 19-35 22.2-52.4-3.7-33.3-7.4-66.6-11.1-99.8-.3-19.2-.7-38.3-1-57.5-10.9-73.4 7.4-131.3 37.3-174.4-1.2-16.3-11.3-25.2-14.1-41.3-5.5-31.7 21.8-126.9 35.3-137.1 11.3-5.7 22.6-8.2 32.3-15.1 6-6.4 12.1-12.8 18.1-19.2 6.9-4.4 14.1-3 19.2-9.1-4.8-6.9-8.3-16.9-13.1-24.2 1.3-6.5 1.9-8.3 8.1-10.1-8.5-22 10.8-38.6 20-49.8z"/>
    
    <mask id="hans-mask">
      <rect width="100%" height="100%" fill="#FFF"/>
      <use xlink:href="#hans-path"/>
    </mask>

    <path id="franz-path" d="M1491 610.7v-13.8s-4.8-10.7-6.2-17.8c-1.4-7.1-4.1-26.5 0-32s20.7-12.4 27.7-9.7c6.9 2.8 27.7 20.9 26.3 31.9-1.4 11-8.3 24.8-8.3 30.4 0 5.5 22.1 15.2 27.7 20.7 5.5 5.5 12.4 26.3 12.4 26.3l-1.5 58.2-11.1 42.5-11.9 45.6-.9 28.5-32.7 1-29.9 8.3-7.2-20.7v-13.8s-18.7-26.1-27.9-27.7c-9.1-1.5-11.1-19.4-7-23.5 4.1-4.1-2.8-35.7-2.1-42 .7-6.4 11.8-64.5 20.1-72.8 8.3-8.5 32.5-19.6 32.5-19.6z"/>
    
    <mask id="franz-mask">
      <rect width="100%" height="100%" fill="#FFF"/>
      <use xlink:href="#franz-path"/>
    </mask>

    <path id="frederich-path" d="M1367.8 601c10.5-8.3 35.4-13.8 40.9 5.5 5.5 19.4-8.3 33.2-8.3 33.2l16.6 19.4s13.3-4.6 21.4 0 2 32.2 2 32.2l-2 34.2.4 30.7-.4 10.6-15.1-2.5s-11.9-42.2-18.1-53.7c-6.2-11.4-10.3-36.3-10.3-36.3l-12.2-14.9-27.4-16.2s-6.4-17.4 0-27.1c6.3-9.5 12.5-15.1 12.5-15.1z"/>
    
    <mask id="frederich-mask">
      <rect width="100%" height="100%" fill="#FFF"/>
      <use xlink:href="#frederich-path"/>
    </mask>
  </defs>

  <use xlink:href="#photo"/>

  <a id="konni" xlink:href="#">
    <title>Konni</title>
    <use class="hover-photo" xlink:href="#grayscalePhoto" mask="url(#konni-mask)"/>
    <use class="hover-path" xlink:href="#konni-path" />
  </a>
  
  <a id="carlo" xlink:href="#">
    <title>Carlo</title>
    <use class="hover-photo" xlink:href="#grayscalePhoto" mask="url(#carlo-mask)"/>
    <use class="hover-path" xlink:href="#carlo-path" />
  </a>
  
  <a id="hendrick" xlink:href="#">
    <title>Hendrick</title>
    <use class="hover-photo" xlink:href="#grayscalePhoto" mask="url(#hendrick-mask)"/>
    <use class="hover-path" xlink:href="#hendrick-path" />
  </a>
  
  <a id="heinz" xlink:href="#">
    <title>Heinz</title>
    <use class="hover-photo" xlink:href="#grayscalePhoto" mask="url(#heinz-mask)"/>
    <use class="hover-path" xlink:href="#heinz-path" />
  </a>
  
  <a id="tobsen" xlink:href="#">
    <title>Tobsen</title>
    <use class="hover-photo" xlink:href="#grayscalePhoto" mask="url(#tobsen-mask)"/>
    <use class="hover-path" xlink:href="#tobsen-path" />
  </a>
  
  <a id="jan" xlink:href="#">
    <title>Jan</title>
    <use class="hover-photo" xlink:href="#grayscalePhoto" mask="url(#jan-mask)"/>
    <use class="hover-path" xlink:href="#jan-path" />
  </a>
  
  <a id="rouven" xlink:href="#">
    <title>Rouven</title>
    <use class="hover-photo" xlink:href="#grayscalePhoto" mask="url(#rouven-mask)"/>
    <use class="hover-path" xlink:href="#rouven-path" />
  </a>
  
  <a id="jule" xlink:href="#">
    <title>Jule</title>
    <use class="hover-photo" xlink:href="#grayscalePhoto" mask="url(#jule-mask)"/>
    <use class="hover-path" xlink:href="#jule-path" />
  </a>
  
  <a id="hans" xlink:href="#">
    <title>Hans</title>
    <use class="hover-photo" xlink:href="#grayscalePhoto" mask="url(#hans-mask)"/>
    <use class="hover-path" xlink:href="#hans-path" />
  </a>
  
  <a id="franz" xlink:href="#">
    <title>Franz</title>
    <use class="hover-photo" xlink:href="#grayscalePhoto" mask="url(#franz-mask)"/>
    <use class="hover-path" xlink:href="#franz-path" />
  </a>
  
  <a id="frederich" xlink:href="#">
    <title>Frederich</title>
    <use class="hover-photo" xlink:href="#grayscalePhoto" mask="url(#frederich-mask)"/>
    <use class="hover-path" xlink:href="#frederich-path" />
  </a>
</svg>
svg {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
}

html { background: #000; }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://codepen.io/shshaw/pen/epmrgO