cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <main>
  
  <h1>Cool CSS hover effect</h1>
  
  <p class="notSupported">
    Seems like CSS custom properties are not supported by your browser. Check if there's an update or consider switching to <a href="https://caniuse.com/#feat=css-variables">a supported one</a>.
  </p>
  
  <div class="isSupported">
    
    <p>
      Adding a cool hover/focus effect to icons from the <a href="https://orioniconlibrary.com">Orion Icon Library</a> with the help of CSS custom properties. If you want to see how the effect looks like in a real application check out <a href="https://mnged.me">MNGED</a>, a small PWA I host.
    </p>

    <svg tabindex=0 class="hoverEffect" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-labelledby="title"
    aria-describedby="desc" role="img" xmlns:xlink="http://www.w3.org/1999/xlink">
      <title>Coffee</title>
      <desc>A color styled icon from Orion Library.</desc>
      <path class="applyEffect" data-name="layer3"
      fill="#f16262" d="M10 10h44v12H10zm2 0l4-8h32l4 8"></path>
      <path data-name="opacity" fill="#fff" opacity=".25" d="M47 10l-4-8h-5l3 8v12h8V10h-2z"></path>
      <path data-name="opacity" fill="#101129" opacity=".25" d="M19.1 10l4-8H16l-4 8h-2v12h7.1V10h2z"></path>
      <path class="applyEffect" data-name="layer2" fill="#fdefe5" d="M14 22l.4 8h35.2l.4-8M15.2 46l.8 16h32l.8-16"></path>
      <path class="applyEffect" data-name="layer1" fill="#c59483" d="M49.6 30H14.4l.8 16h33.6l.8-16z"></path>
      <path data-name="opacity" fill="#101129" opacity=".18" d="M20 22h-6l.4 8h6l-.4-8zm-4.8 24l.8 16h6l-.8-16h-6z"></path>
      <path data-name="opacity" fill="#101129" opacity=".25" d="M20.4 30h-6l.8 16h6l-.8-16z"></path>
      <path data-name="stroke" fill="none" stroke="#2f446a" stroke-linecap="round"
      stroke-linejoin="miter" stroke-width="2" d="M10 10h44v12H10zm2 0l4-8h32l4 8M14 22l.4 8h35.2l.4-8M15.2 46l.8 16h32l.8-16m.8-16H14.4l.8 16h33.6l.8-16z"></path>
    </svg>


    <svg tabindex=0 class="hoverEffect" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-labelledby="title"
    aria-describedby="desc" role="img" xmlns:xlink="http://www.w3.org/1999/xlink">
      <title>Glazed Donut</title>
      <desc>A color styled icon from Orion Library.</desc>
      <path class="applyEffect" data-name="layer2"
      d="M32 62a30 30 0 0 0 26.6-16.2C50 42 49.2 50.6 46 50s-4.2-3.3-6-.4-4.7 3-7.9 2.4-3.4.7-6.3 2-7.1-1.2-5.8-6-4.7-5.1-6-2-2.2 5.6-4 5.9h-.4A29.9 29.9 0 0 0 32 62z"
      fill="#de9d63"></path>
      <path class="applyEffect" data-name="layer1" d="M32 2A30 30 0 0 0 9.6 52h.4c1.9-.3 2.8-2.8 4-5.9s7.2-2.6 6 2 2.9 7.3 5.8 6 3.1-2.6 6.3-2 6.1.5 7.9-2.4 2.8-.2 6 .4 4-8 12.6-4.2A30 30 0 0 0 32 2zm0 40a10 10 0 1 1 10-10 10 10 0 0 1-10 10z"
      fill="#f5a4c4"></path>
      <path data-name="opacity" d="M20 36a10 10 0 0 0 19.7 2.4 10 10 0 0 1-17.4-8.8A10 10 0 0 0 20 36zM32 2A30 30 0 0 0 4.2 20.6a30 30 0 0 1 54.2 25.1h.3A30 30 0 0 0 32 2z"
      fill="#fff" opacity=".25"></path>
      <circle data-name="stroke" cx="32" cy="32" r="30" fill="none" stroke="#2f446a"
      stroke-linecap="round" stroke-linejoin="miter" stroke-width="2"></circle>
      <circle class="applyEffect" data-name="stroke" cx="32" cy="32" r="10" fill="none"
      stroke="#2f446a" stroke-linecap="round" stroke-linejoin="miter" stroke-width="2"></circle>
      <path data-name="stroke" d="M10 51.9c1.9-.3 2.8-2.8 4-5.9s7.2-2.6 6 2 2.9 7.3 5.8 6 3.1-2.6 6.3-2 6.1.5 7.9-2.4 2.8-.2 6 .4 4-8 12.6-4.2M18 14l4 4m-8 8l-4 4m2 8h4m10-28h8m10 4l-4 4m10 6l4 2m-4 8v4"
      fill="none" stroke="#2f446a" stroke-linecap="round" stroke-linejoin="miter"
      stroke-width="2"></path>
    </svg>


    <svg tabindex=0 class="hoverEffect" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" aria-labelledby="title"
    aria-describedby="desc" role="img" xmlns:xlink="http://www.w3.org/1999/xlink">
      <title>Pizza Slice</title>
      <desc>A color styled icon from Orion Library.</desc>
      <path class="applyEffect" fill="#faf287" d="M22.473 9.3L7 54l42.978-18.91C44.833 23.128 34.618 14.087 22.473 9.3z"
      data-name="layer3"></path>
      <circle class="applyEffect" fill="#f04848" r="4" cy="23.999" cx="28.999" data-name="layer2"></circle>
      <circle class="applyEffect" fill="#f04848" r="2" cy="33.999" cx="34.999" data-name="layer2"></circle>
      <circle class="applyEffect" fill="#f04848" r="2.5" cy="37.499" cx="20.999" data-name="layer2"></circle>
      <path class="applyEffect" fill="#f6b36d" d="M25 2l-2.527 7.3c12.145 4.787 22.36 13.828 27.507 25.787L57 32C51.011 18.087 39.13 7.567 25 2z"
      data-name="layer1"></path>
      <path opacity=".18" fill="#101129" d="M51.981 33.087C46.835 21.128 36.62 12.085 24.475 7.3l1.668-4.818C25.761 2.321 25.384 2.153 25 2l-2.527 7.3c12.145 4.787 22.36 13.828 27.507 25.787L57 32c-.136-.314-.29-.619-.432-.93z"
      data-name="opacity"></path>
      <circle stroke-width="2" stroke-linejoin="miter" stroke-linecap="round"
      stroke="#2f446a" fill="none" r="4" cy="23.999" cx="28.999" data-name="stroke"></circle>
      <circle stroke-width="2" stroke-linejoin="miter" stroke-linecap="round"
      stroke="#2f446a" fill="none" r="2" cy="33.999" cx="34.999" data-name="stroke"></circle>
      <circle stroke-width="2" stroke-linejoin="miter" stroke-linecap="round"
      stroke="#2f446a" fill="none" r="2.5" cy="37.499" cx="20.999" data-name="stroke"></circle>
      <path stroke-width="2" stroke-linejoin="miter" stroke-linecap="round"
      stroke="#2f446a" fill="none" d="M22.473 9.3L7 54l42.978-18.91C44.833 23.128 34.618 14.087 22.473 9.3z"
      data-name="stroke"></path>
      <path stroke-width="2" stroke-linejoin="miter" stroke-linecap="round"
      stroke="#2f446a" fill="none" d="M49.979 35.087L57 32C51.011 18.087 39.13 7.567 25 2l-2.527 7.3m-5.474 40.299v8.4m8-11.92v15.92m16-22.933v12.933"
      data-name="stroke"></path>
    </svg>


    <svg tabindex=0 class="hoverEffect" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-labelledby="title"
    aria-describedby="desc" role="img" xmlns:xlink="http://www.w3.org/1999/xlink">
      <title>Smile Emoji</title>
      <desc>A color styled icon from Orion Library.</desc>
      <circle class="applyEffect" data-name="layer3"
      cx="32" cy="32" r="30" fill="#fc6"></circle>
      <path data-name="opacity" d="M60 38a36.2 36.2 0 0 1-.5 6A30 30 0 0 0 32 2l-3.8.3A36 36 0 0 1 60 38z"
      fill="#fff" opacity=".2"></path>
      <path data-name="opacity" d="M8 28A29.9 29.9 0 0 1 18.5 5.2a30 30 0 1 0 33 49.6A30 30 0 0 1 8 28z"
      fill="#000064" opacity=".15"></path>
      <circle class="applyEffect" data-name="layer1" cx="22" cy="26" r="2" fill="#64738f"></circle>
      <circle class="applyEffect" data-name="layer1" cx="42" cy="26" r="2" fill="#64738f"></circle>
      <path class="applyEffect" data-name="layer2" d="M14 40c2.2 7.9 9.4 14 18 14s15.8-6.1 18-14z"
      fill="#fff"></path>
      <path class="applyEffect" data-name="layer1" d="M16 44a52 52 0 0 0 15 2 78.9 78.9 0 0 0 17-2s-3 10-16 10a17.2 17.2 0 0 1-16-10z"
      fill="#64738f"></path>
      <circle data-name="stroke" cx="32" cy="32" r="30" fill="none" stroke="#2e4369"
      stroke-linecap="round" stroke-linejoin="miter" stroke-width="2"></circle>
      <circle data-name="stroke" cx="22" cy="26" r="2" fill="none"
      stroke="#2e4369" stroke-linecap="round" stroke-linejoin="miter" stroke-width="2"></circle>
      <circle data-name="stroke" cx="42" cy="26" r="2" fill="none"
      stroke="#2e4369" stroke-linecap="round" stroke-linejoin="miter" stroke-width="2"></circle>
      <path data-name="stroke" d="M14 40c2.2 7.9 9.4 14 18 14s15.8-6.1 18-14z"
      fill="none" stroke="#2e4369" stroke-linecap="round" stroke-linejoin="miter"
      stroke-width="2"></path>
    </svg>


    <svg tabindex=0 class="hoverEffect" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-labelledby="title"
    aria-describedby="desc" role="img" xmlns:xlink="http://www.w3.org/1999/xlink">
      <title>Taxi</title>
      <desc>A color styled icon from Orion Library.</desc>
      <path class="applyEffect" data-name="layer2"
      d="M62 52V36.2a5 5 0 0 0-1.3-3.5l-2-2C57.5 29.5 56 28 54 28H10c-2 0-3.5 1.5-4.7 2.7l-2 2A5 5 0 0 0 2 36.2V52z"
      fill="#fc0"></path>
      <rect class="applyEffect" data-name="layer4" x="10" y="38" width="10" height="6" rx="2"
      ry="2" fill="#a0d6ef"></rect>
      <rect class="applyEffect" data-name="layer4" x="44" y="38" width="10" height="6" rx="2"
      ry="2" fill="#a0d6ef"></rect>
      <path class="applyEffect" data-name="layer3" d="M16 52v7a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3v-7zm42 0v7a3 3 0 0 1-3 3h-4a3 3 0 0 1-3-3v-7z"
      fill="#7b8baf"></path>
      <path class="applyEffect" data-name="layer2" fill="#fc0" d="M24 2h16v8H24z"></path>
      <path class="applyEffect" data-name="layer1" d="M54 28a4.3 4.3 0 0 1 2 .5s-1-10.2-1.4-13.2a5.7 5.7 0 0 0-5.5-5.3H14.9a5.7 5.7 0 0 0-5.5 5.3C9 18.3 8 28.5 8 28.5a4.3 4.3 0 0 1 2-.5z"
      fill="#c3d6e0"></path>
      <path data-name="opacity" d="M24.9 10L8.1 26.8v1.7H8a4.3 4.3 0 0 1 2-.5h11.1l18-18zm26.4.2L33.5 28h8.8l11.5-11.5-.2-2.1a6.2 6.2 0 0 0-2.3-4.2z"
      fill="#fff" opacity=".5"></path>
      <path data-name="opacity" d="M3.3 32.7A5 5 0 0 0 2 36.2V52h60v-2.9H6.9V35c0-2.8 2.5-7 3.1-7-2 0-3.4 1.5-4.7 2.7z"
      fill="#000064" opacity=".15"></path>
      <path data-name="opacity" d="M58.7 30.7C57.5 29.5 56 28 54 28H10c-.4 0-1.6 1.8-2.4 3.9h46.7c1.5 0 6 .6 7.2 2a4.2 4.2 0 0 0-.8-1.2z"
      fill="#fff" opacity=".2"></path>
      <path data-name="opacity" fill="#000064" opacity=".2" d="M6 52h10v3.94H6zm42 0h10v3.94H48z"></path>
      <path data-name="stroke" d="M16 52v7a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3v-7m52 0v7a3 3 0 0 1-3 3h-4a3 3 0 0 1-3-3v-7m14 0V36.2a5 5 0 0 0-1.3-3.5l-2-2C57.5 29.5 56 28 54 28H10c-2 0-3.5 1.5-4.7 2.7l-2 2A5 5 0 0 0 2 36.2V52z"
      fill="none" stroke="#2e4369" stroke-linecap="round" stroke-linejoin="miter"
      stroke-width="2"></path>
      <rect data-name="stroke" x="10" y="38" width="10" height="6" rx="2"
      ry="2" fill="none" stroke="#2e4369" stroke-linecap="round" stroke-linejoin="miter"
      stroke-width="2"></rect>
      <rect data-name="stroke" x="44" y="38" width="10" height="6" rx="2"
      ry="2" fill="none" stroke="#2e4369" stroke-linecap="round" stroke-linejoin="miter"
      stroke-width="2"></rect>
      <path data-name="stroke" fill="none" stroke="#2e4369" stroke-linecap="round"
      stroke-linejoin="miter" stroke-width="2" d="M28 42h8M24 10V2h16v8M8 28.5s1-10.2 1.4-13.2a5.7 5.7 0 0 1 5.5-5.3h34.2a5.7 5.7 0 0 1 5.5 5.3c.4 3 1.4 13.2 1.4 13.2"></path>
    </svg>
    
  </div>
  
</main>
<h2>&lt;coded /&gt; with 
<svg class="hoverEffect" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-labelledby="title"
aria-describedby="desc" role="img" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Hearts</title>
  <desc>A color styled icon from Orion Library.</desc>
  <path class="applyEffect" data-name="layer2"
  d="M53 27a9.7 9.7 0 0 0-9 5.9 9.7 9.7 0 0 0-9-5.9 8.9 8.9 0 0 0-9 8.9c0 8.3 6.6 16 18 23.1 11.4-7.1 18-14.8 18-23.1a8.9 8.9 0 0 0-9-8.9z"
  fill="#f27eb1"></path>
  <path class="applyEffect" data-name="layer1" d="M35 27c3.9 0 7.9 2.5 9.2 5.9.5-1.4.8-2.7 2.8-3.6a26.4 26.4 0 0 0 3.2-12.1A12.2 12.2 0 0 0 38.1 5c-5.2 0-10.4 3.4-12 8.1C24.4 8.4 19.3 5 14 5A12.1 12.1 0 0 0 2 17.2c0 11.4 8.8 22.2 24 32 1.3-.8 2.5-2.2 3.7-2.2-2.4-4-3.7-7.2-3.7-10.9a9.2 9.2 0 0 1 9-9.1z"
  fill="#f27e7c"></path>
  <path data-name="stroke" d="M46.7 29.3A24.5 24.5 0 0 0 50 17.2 12.1 12.1 0 0 0 38 5a12.9 12.9 0 0 0-12 8.1A12.9 12.9 0 0 0 14 5 12.1 12.1 0 0 0 2 17.2c0 11.4 8.8 22 24 31.8l3.7-2.5"
  fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="miter"
  stroke-width="2"></path>
  <path data-name="stroke" d="M53 27a9.7 9.7 0 0 0-9 5.9 9.7 9.7 0 0 0-9-5.9 8.9 8.9 0 0 0-9 8.9c0 8.3 6.6 16 18 23.1 11.4-7.1 18-14.8 18-23.1a8.9 8.9 0 0 0-9-8.9z"
  fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="miter"
  stroke-width="2"></path>
</svg> and
<svg class="hoverEffect" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" aria-labelledby="title"
aria-describedby="desc" role="img" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Coffee Beans</title>
  <desc>A color styled icon from Orion Library.</desc>
  <path class="applyEffect" fill="#775958" d="M39.025 36.465c3.352 9.283-1.988 17.943-11.93 19.348-9.94 1.402-20.716-4.985-24.068-14.268-3.351-9.281 1.989-17.943 11.93-19.346 9.94-1.402 20.715 4.985 24.068 14.266z"
  data-name="layer1"></path>
  <path class="applyEffect" fill="#775958" d="M40.045 41.996c8.998-.127 17.967-6.125 20.975-14.457 3.35-9.283-1.99-17.945-11.93-19.347-9.94-1.403-20.715 4.986-24.069 14.265a30.93 30.93 0 0 0-.244.725"
  data-name="layer1"></path>
  <path stroke-width="2" stroke-linejoin="miter" stroke-linecap="round"
  stroke="#000" fill="none" d="M9.98 32.002c3.659 4.922 5.946 5.82 12 6 6 .176 9.854 1.584 11.999 6"
  data-name="stroke"></path>
  <path stroke-width="2" stroke-linejoin="miter" stroke-linecap="round"
  stroke="#000" fill="none" d="M38.979 36.46c3.351 9.282-1.989 17.945-11.93 19.347S6.332 50.823 2.98 41.54c-3.35-9.282 1.99-17.944 11.93-19.346 9.94-1.403 20.715 4.984 24.069 14.265z"
  data-name="stroke"></path>
  <path stroke-width="2" stroke-linejoin="miter" stroke-linecap="round"
  stroke="#000" fill="none" d="M53.973 17.996c-3.659 4.92-5.946 5.82-12 5.998-4.424.131-7.682.932-9.95 3.116"
  data-name="stroke"></path>
  <path stroke-width="2" stroke-linejoin="miter" stroke-linecap="round"
  stroke="#000" fill="none" d="M40.037 41.99c8.998-.127 17.928-6.124 20.936-14.457 3.351-9.28-1.989-17.943-11.93-19.345-9.94-1.405-20.715 4.984-24.068 14.263-.086.245-.168.485-.245.727"
  data-name="stroke"></path>
</svg> by <a href="https://maniyt.de">Marius Niveri</a></h2>
            
          
!
            
              /* ---------------------------------------------------------
     Only this CSS is required for this effect to work
  This is pure CSS, using SCSS only for other page styles
--------------------------------------------------------- */

.applyEffect {
    transition: fill .13s;
    fill: transparent;
}

svg:hover .applyEffect, svg:focus .applyEffect {
  // gets assigned by javascript
  fill: var(--hover-color);
}
  



/* ---------------------------------------------------------
    Other page styles, nothing to do with the effect
--------------------------------------------------------- */

:root {
  --body-background-color: #2e4369;
  --box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14),
                0 6px 30px 5px rgba(0,0,0,0.12),
                0 8px 10px -5px rgba(0,0,0,0.3);
  --font-stack: Helvetica Neue, Helvetica, Arial, sans-serif;
}

body, html {
  background: var(--body-background-color);
  font-family: var(--font-stack);
  text-align: center;
}

body {
  padding: 0 12px;
}

* {
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
  font-weight: bold;

  &:hover {
    text-decoration: underline;
  }
}

main {
  background: #fefefe;
  padding: 16px 8px;
  margin: 56px auto;
  max-width: 720px;
  border-radius: 12px;
  box-shadow: var(--box-shadow);
  
  // Check if CSS custom properties are supported:
  .isSupported {
    display: none;
  }

  .notSupported {
    display: block;
    background: rgba(255,0,0,.13);
    padding: 8px 16px;
    border-radius: 8px;
  }

  @supports (--a: 0) {
    .isSupported {
      display: block;
    }

    .notSupported {
      display: none;
    }
  }
  
  h1 {
    margin: 0 0 8px 0;
    font-weight: 100;
  }
  
  p {
    max-width: 512px;
    margin: 0 auto 16px;
  }
  
  svg {
    height: 112px;
    margin: 8px;
  }
}

h2 {
  color: rgba(255,255,255,.57);
  font-size: 18px;
  font-weight: 100;
  
  svg {
    height: 20px;
    position: relative;
    bottom: -2px;
    
    path {
      stroke: rgba(255,255,255,.57);
    }
  }
  
  svg:hover {
    .applyEffect {
      fill: var(--hover-color);
    }
    
    path {
      stroke: #000;
    }
  }
}
            
          
!
            
              /*
  Gets all elements with class 'applyEffect' and copies fill into CSS3 custom property.
  
  A less convenient, but non-javascript, option is to do this by hand like this:
  <element style="--hover-color: COLOR"></element>
*/

document.querySelectorAll('.applyEffect').forEach(function(element) {
  const hoverColor = element.getAttribute("fill"); // get the fill color
  
  // set it as a custom property inline
  if (hoverColor) element.style.setProperty('--hover-color', hoverColor);
});

// One liner alternative with ES6 syntax:

// document.querySelectorAll('.applyEffect').forEach(el => el.style.setProperty('--hover-color', el.getAttribute('fill')) || '#fff');
            
          
!
999px
Loading ..................

Console