<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/m4r1vs/pen/qVReQz" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style class="cp-pen-styles">/* ---------------------------------------------------------
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 {
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;
}
a:hover {
text-decoration: underline;
}
main {
background: #fefefe;
padding: 16px 8px;
margin: 56px auto;
max-width: 720px;
border-radius: 12px;
box-shadow: var(--box-shadow);
}
main .isSupported {
display: none;
}
main .notSupported {
display: block;
background: rgba(255, 0, 0, 0.13);
padding: 8px 16px;
border-radius: 8px;
}
@supports (--a: 0) {
main .isSupported {
display: block;
}
main .notSupported {
display: none;
}
}
main h1 {
margin: 0 0 8px 0;
font-weight: 100;
}
main p {
max-width: 512px;
margin: 0 auto 16px;
}
main svg {
height: 112px;
margin: 8px;
}
h2 {
color: rgba(255, 255, 255, 0.57);
font-size: 18px;
font-weight: 100;
}
h2 svg {
height: 20px;
position: relative;
bottom: -2px;
}
h2 svg path {
stroke: rgba(255, 255, 255, 0.57);
}
h2 svg:hover .applyEffect {
fill: var(--hover-color);
}
h2 svg:hover path {
stroke: #000;
}
</style></head><body>
<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><coded /> 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>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >/*
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');
//# sourceURL=pen.js
</script>
</body></html>
