Hover.css

Developer
Shannon Range
Size
13,814 Kb
Views
24,288
  1. Hover.css Previews
  2. Hover.css HTML Codes
  3. Hover.css CSS Codes

How do I make an hover.css?

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, SASS, and LESS.. What is a hover.css? How do you make a hover.css? This script and codes were developed by Shannon Range on 10 November 2022, Thursday.

Hover.css Previews
IQ Test

Hover.css - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hover.css</title> <link rel='stylesheet prefetch' href='https://ianlunn.github.io/Hover/css/demo-page.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* * Hover.css (https://ianlunn.co.uk/) * Version: 1.0 * Author: Ian Lunn @IanLunn * Author URL: https://ianlunn.co.uk/ * Github: https://github.com/IanLunn/Hover * Made available under a MIT License: * https://www.opensource.org/licenses/mit-license.php * Hover.css Copyright Ian Lunn 2014. */
/* Default styles for the demo buttons */
.button { margin: .4em; padding: 1em; cursor: pointer; background: #ececec; text-decoration: none; color: #666;
}
/* 2D TRANSITIONS */
/* Grow */
.grow { display: inline-block; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.grow:hover { transform: scale(1.1);
}
/* Shrink */
.shrink { display: inline-block; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.shrink:hover { transform: scale(0.9);
}
/* Pulse */
@keyframes pulse { 25% { transform: scale(1.1); } 75% { transform: scale(0.9); }
}
.pulse { display: inline-block; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.pulse:hover { animation-name: pulse; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite;
}
/* Pulse Grow */
@keyframes pulse-grow { to { transform: scale(1.1); }
}
.pulse-grow { display: inline-block; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.pulse-grow:hover { animation-name: pulse-grow; animation-duration: 0.3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate;
}
/* Pulse Shrink */
@keyframes pulse-shrink { to { transform: scale(0.9); }
}
.pulse-shrink { display: inline-block; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.pulse-shrink:hover { animation-name: pulse-shrink; animation-duration: 0.3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate;
}
/* Push */
@keyframes push { 50% { transform: scale(0.8); } 100% { transform: scale(1); }
}
.push { display: inline-block; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.push:hover { animation-name: push; animation-duration: 0.3s; animation-timing-function: linear; animation-iteration-count: 1;
}
/* Pop */
@keyframes pop { 50% { transform: scale(1.2); } 100% { transform: scale(1); }
}
.pop { display: inline-block; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.pop:hover { animation-name: pop; animation-duration: 0.3s; animation-timing-function: linear; animation-iteration-count: 1;
}
/* Rotate */
.rotate { display: inline-block; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.rotate:hover { transform: rotate(4deg);
}
/* Grow Rotate */
.grow-rotate { display: inline-block; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.grow-rotate:hover { transform: scale(1.1) rotate(4deg);
}
/* Float */
.float { display: inline-block; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.float:hover { transform: translateY(-5px);
}
/* Sink */
.sink { display: inline-block; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.sink:hover { transform: translateY(5px);
}
/* Hover */
@keyframes hover { 50% { transform: translateY(-3px); } 100% { transform: translateY(-6px); }
}
.hover { display: inline-block; transition-duration: .5s; transition-property: transform; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.hover:hover { transform: translateY(-6px); animation-name: hover; animation-duration: 1.5s; animation-delay: 0.3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate;
}
/* Hang */
@keyframes hang { 50% { transform: translateY(3px); } 100% { transform: translateY(6px); }
}
.hang { display: inline-block; transition-duration: .5s; transition-property: transform; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.hang:hover { transform: translateY(6px); animation-name: hang; animation-duration: 1.5s; animation-delay: 0.3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate;
}
/* Skew */
.skew { display: inline-block; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.skew:hover { transform: skew(-10deg);
}
/* Skew Forward */
.skew-forward { display: inline-block; transition-duration: 0.3s; transition-property: transform; transform-origin: 0 100%; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.skew-forward:hover { transform: skew(-10deg);
}
/* Wobble Vertical */
@keyframes wobble-vertical { 16.65% { transform: translateY(8px); } 33.3% { transform: translateY(-6px); } 49.95% { transform: translateY(4px); } 66.6% { transform: translateY(-2px); } 83.25% { transform: translateY(1px); } 100% { transform: translateY(0); }
}
.wobble-vertical { display: inline-block; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.wobble-vertical:hover { animation-name: wobble-vertical; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1;
}
/* Wobble Horizontal */
@keyframes wobble-horizontal { 16.65% { transform: translateX(8px); } 33.3% { transform: translateX(-6px); } 49.95% { transform: translateX(4px); } 66.6% { transform: translateX(-2px); } 83.25% { transform: translateX(1px); } 100% { transform: translateX(0); }
}
.wobble-horizontal { display: inline-block; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.wobble-horizontal:hover { animation-name: wobble-horizontal; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1;
}
/* Wobble Top */
@keyframes wobble-top { 16.65% { transform: skew(-12deg); } 33.3% { transform: skew(10deg); } 49.95% { transform: skew(-6deg); } 66.6% { transform: skew(4deg); } 83.25% { transform: skew(-2deg); } 100% { transform: skew(0); }
}
.wobble-top { display: inline-block; transform-origin: 0 100%; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.wobble-top:hover { animation-name: wobble-top; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1;
}
/* Wobble Bottom */
@keyframes wobble-bottom { 16.65% { transform: skew(-12deg); } 33.3% { transform: skew(10deg); } 49.95% { transform: skew(-6deg); } 66.6% { transform: skew(4deg); } 83.25% { transform: skew(-2deg); } 100% { transform: skew(0); }
}
.wobble-bottom { display: inline-block; transform-origin: 100% 0; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.wobble-bottom:hover { animation-name: wobble-bottom; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1;
}
/* BORDER TRANSITIONS */
/* Border Fade */
.border-fade { display: inline-block; transition-duration: 0.3s; transition-property: box-shadow; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: inset 0 0 0 4px #ececec, 0 0 1px transparent; /* Hack to improve aliasing on mobile/tablet devices */
}
.border-fade:hover { box-shadow: inset 0 0 0 4px #666, 0 0 1px transparent; /* Hack to improve aliasing on mobile/tablet devices */
}
/* Hollow */
.hollow { display: inline-block; transition-duration: 0.3s; transition-property: background; transform: translateZ(0); /* Hack to improve performance on mobile/tablet devices */ box-shadow: inset 0 0 0 4px #ececec, 0 0 1px transparent; /* Hack to improve aliasing on mobile/tablet devices */
}
.hollow:hover { background: none;
}
/* Trim */
.trim { display: inline-block; position: relative; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.trim:before { content: ''; position: absolute; border: white solid 4px; top: 4px; left: 4px; right: 4px; bottom: 4px; opacity: 0; transition-duration: 0.3s; transition-property: opacity;
}
.trim:hover:before { opacity: 1;
}
/* Outline Outward */
.outline-outward { display: inline-block; position: relative; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.outline-outward:before { content: ''; position: absolute; border: #ececec solid 4px; top: 0; right: 0; bottom: 0; left: 0; transition-duration: .3s; transition-property: top right bottom left;
}
.outline-outward:hover:before { top: -8px; right: -8px; bottom: -8px; left: -8px;
}
/* Outline Inward */
.outline-inward { display: inline-block; position: relative; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.outline-inward:before { content: ''; position: absolute; border: #ececec solid 4px; top: -16px; right: -16px; bottom: -16px; left: -16px; opacity: 0; transition-duration: .3s; transition-property: top right bottom left;
}
.outline-inward:hover:before { top: -8px; right: -8px; bottom: -8px; left: -8px; opacity: 1;
}
/* Round Corners */
.round-corners { display: inline-block; transition-duration: 0.3s; transition-property: border-radius; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.round-corners:hover { border-radius: 1em;
}
/* SHADOW/GLOW TRANSITIONS */
/* Glow */
.glow { display: inline-block; transition-duration: 0.3s; transition-property: box-shadow; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.glow:hover { box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}
/* Box Shadow Outset */
.box-shadow-outset { display: inline-block; transition-duration: 0.3s; transition-property: box-shadow; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.box-shadow-outset:hover { box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
}
/* Box Shadow Inset */
.box-shadow-inset { display: inline-block; transition-duration: 0.3s; transition-property: box-shadow; box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.6), 0 0 1px transparent; /* Hack to improve aliasing on mobile/tablet devices */ -webkit-tap-highlight-color: transparent; transform: translateZ(0);
}
.box-shadow-inset:hover { box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.6), 0 0 1px transparent; /* Hack to improve aliasing on mobile/tablet devices */
}
/* Float Shadow */
.float-shadow { display: inline-block; position: relative; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.float-shadow:before { pointer-events: none; position: absolute; z-index: -1; content: ''; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); /* W3C */ transition-duration: 0.3s; transition-property: transform opacity;
}
.float-shadow:hover { transform: translateY(-5px); /* move the element up by 5px */
}
.float-shadow:hover:before { opacity: 1; transform: translateY(5px); /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}
/* Hover Shadow */
@keyframes hover { 50% { transform: translateY(-3px); } 100% { transform: translateY(-6px); }
}
@keyframes hover-shadow { 0% { transform: translateY(6px); opacity: .4; } 50% { transform: translateY(3px); opacity: 1; } 100% { transform: translateY(6px); opacity: .4; }
}
.hover-shadow { display: inline-block; position: relative; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.hover-shadow:before { pointer-events: none; position: absolute; z-index: -1; content: ''; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); /* W3C */ transition-duration: 0.3s; transition-property: transform opacity;
}
.hover-shadow:hover { transform: translateY(-6px); animation-name: hover; animation-duration: 1.5s; animation-delay: 0.3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate;
}
.hover-shadow:hover:before { opacity: .4; transform: translateY(6px); animation-name: hover-shadow; animation-duration: 1.5s; animation-delay: .3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate;
}
/* Shadow Radial */
.shadow-radial { display: inline-block; position: relative; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.shadow-radial:before, .shadow-radial:after { pointer-events: none; position: absolute; content: ''; left: 0; width: 100%; box-sizing: border-box; background-repeat: no-repeat; height: 5px; opacity: 0; transition-duration: 0.3s; transition-property: opacity;
}
.shadow-radial:before { bottom: 100%; background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}
.shadow-radial:after { top: 100%; background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}
.shadow-radial:hover:before, .shadow-radial:hover:after { opacity: 1;
}
/* SPEECH BUBBLES */
/* Bubble Top */
.bubble-top { display: inline-block; position: relative; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.bubble-top:before { pointer-events: none; position: absolute; z-index: -1; content: ''; border-style: solid; transition-duration: 0.3s; left: calc(50% - 10px); border-width: 0 10px 10px 10px; border-color: transparent transparent #ececec transparent; transition-property: top;
}
.bubble-top:hover:before { top: -10px;
}
/* Bubble Right */
.bubble-right { display: inline-block; position: relative; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.bubble-right:before { pointer-events: none; position: absolute; z-index: -1; content: ''; border-style: solid; transition-duration: 0.3s; transition-property: right; top: calc(50% - 10px); right: 0; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #ececec;
}
.bubble-right:hover:before { right: -10px;
}
/* Bubble Bottom */
.bubble-bottom { display: inline-block; position: relative; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.bubble-bottom:before { pointer-events: none; position: absolute; z-index: -1; content: ''; border-style: solid; transition-duration: 0.3s; transition-property: bottom; left: calc(50% - 10px); bottom: 0; border-width: 10px 10px 0 10px; border-color: #ececec transparent transparent transparent;
}
.bubble-bottom:hover:before { bottom: -10px;
}
/* Bubble Left */
.bubble-left { display: inline-block; position: relative; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.bubble-left:before { pointer-events: none; position: absolute; z-index: -1; content: ''; border-style: solid; transition-duration: 0.3s; transition-property: left; top: calc(50% - 10px); left: 0; border-width: 10px 10px 10px 0; border-color: transparent #ececec transparent transparent;
}
.bubble-left:hover:before { left: -10px;
}
/* Bubble Float Top */
.bubble-float-top { display: inline-block; position: relative; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.bubble-float-top:before { pointer-events: none; position: absolute; z-index: -1; content: ''; left: calc(50% - 10px); top: 0; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #ececec transparent; transition-duration: 0.3s; transition-property: top;
}
.bubble-float-top:hover { transform: translateY(5px) translateZ(0);
}
.bubble-float-top:hover:before { top: -10px;
}
/* Bubble Float Right */
.bubble-float-right { display: inline-block; position: relative; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.bubble-float-right:before { pointer-events: none; position: absolute; z-index: -1; top: calc(50% - 10px); right: 0; content: ''; border-style: solid; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #ececec; transition-duration: 0.3s; transition-property: right;
}
.bubble-float-right:hover { transform: translateX(-5px);
}
.bubble-float-right:hover:before { right: -10px;
}
/* Bubble Float Bottom */
.bubble-float-bottom { display: inline-block; position: relative; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.bubble-float-bottom:before { pointer-events: none; position: absolute; z-index: -1; content: ''; left: calc(50% - 10px); bottom: 0; border-style: solid; border-width: 10px 10px 0 10px; border-color: #ececec transparent transparent transparent; transition-duration: 0.3s; transition-property: bottom;
}
.bubble-float-bottom:hover { transform: translateY(-5px) translateZ(0);
}
.bubble-float-bottom:hover:before { bottom: -10px;
}
/* Bubble Float Left */
.bubble-float-left { display: inline-block; position: relative; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.bubble-float-left:before { pointer-events: none; position: absolute; z-index: -1; content: ''; top: calc(50% - 10px); left: 0; border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent #ececec transparent transparent; transition-duration: 0.3s; transition-property: left;
}
.bubble-float-left:hover { transform: translateX(5px);
}
.bubble-float-left:hover:before { left: -10px;
}
/* CURLS */
/* Curl Top Left */
.curl-top-left { display: inline-block; position: relative; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.curl-top-left:before { pointer-events: none; position: absolute; content: ''; height: 0; width: 0; top: 0; left: 0; background: white; /* IE9 */ background: linear-gradient(135deg, white 45%, #aaa 50%, #ccc 56%, white 80%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000'); /*For IE7-8-9*/ z-index: 1000; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); transition-duration: 0.3s; transition-property: width height;
}
.curl-top-left:hover:before { width: 25px; height: 25px;
}
/* Curl Top Right */
.curl-top-right { display: inline-block; position: relative; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.curl-top-right:before { pointer-events: none; position: absolute; content: ''; height: 0; width: 0; top: 0; right: 0; background: white; /* IE9 */ background: linear-gradient(225deg, white 45%, #aaa 50%, #ccc 56%, white 80%); box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4); transition-duration: 0.3s; transition-property: width height;
}
.curl-top-right:hover:before { width: 25px; height: 25px;
}
/* Curl Bottom Right */
.curl-bottom-right { display: inline-block; position: relative; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.curl-bottom-right:before { pointer-events: none; position: absolute; content: ''; height: 0; width: 0; bottom: 0; right: 0; background: white; /* IE9 */ background: linear-gradient(315deg, white 45%, #aaa 50%, #ccc 56%, white 80%); box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4); transition-duration: 0.3s; transition-property: width height;
}
.curl-bottom-right:hover:before { width: 25px; height: 25px;
}
/* Curl Bottom Left */
.curl-bottom-left { display: inline-block; position: relative; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.curl-bottom-left:before { pointer-events: none; position: absolute; content: ''; height: 0; width: 0; bottom: 0; left: 0; background: white; /* IE9 */ background: linear-gradient(45deg, white 45%, #aaa 50%, #ccc 56%, white 80%); box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4); transition-duration: 0.3s; transition-property: width height;
}
.curl-bottom-left:hover:before { width: 25px; height: 25px;
}
.link { display: block; width: 100%; text-align: center;
}
.link a { font-weight: bold;
}
#forkongithub a { background: #000; color: #fff; text-decoration: none; font-family: arial, sans-serif; text-align: center; font-weight: bold; padding: 5px 40px; font-size: 1rem; line-height: 2rem; position: relative; transition: 0.5s;
}
#forkongithub a:hover { background: #060; color: #fff;
}
#forkongithub a::before, #forkongithub a::after { content: ""; width: 100%; display: block; position: absolute; top: 1px; left: 0; height: 1px; background: #fff;
}
#forkongithub a::after { bottom: 1px; top: auto;
}
@media screen and (min-width: 800px) { #forkongithub { position: absolute; display: block; top: 0; right: 0; width: 200px; overflow: hidden; height: 200px; } #forkongithub a { width: 200px; position: absolute; top: 60px; right: -60px; transform: rotate(45deg); -webkit-transform: rotate(45deg); box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <span id="forkongithub"><a href="https://github.com/IanLunn/Hover">Fork me on GitHub</a></span>
<h1>Hover.css</h1>
<div class="link">
<a class="grow" href="https://ianlunn.github.io/Hover/">Version 2 now available →</a> <small>Includes over 100 effects and SASS/LESS support</small>
</div>
<h2>2D Transforms</h2>	<a rel="grow" class="button grow">Grow</a>	<a rel="shrink" class="button shrink">Shrink</a>	<a rel="pulse" class="button pulse">Pulse</a>	<a rel="pulse-grow" class="button pulse-grow">Pulse Grow</a>	<a rel="pulse-shrink" class="button pulse-shrink">Pulse Shrink</a>	<a rel="push" class="button push">Push</a>	<a rel="pop" class="button pop">Pop</a>	<a rel="rotate" class="button rotate">Rotate</a>	<a rel="grow-rotate" class="button grow-rotate">Grow Rotate</a>	<a rel="float" class="button float">Float</a>	<a rel="sink" class="button sink">Sink</a>	<a rel="hover" class="button hover">Hover</a>	<a rel="hang" class="button hang">Hang</a>	<a rel="skew" class="button skew">Skew</a>	<a rel="skew-forward" class="button skew-forward">Skew Forward</a>	<a rel="wobble-horizontal" class="button wobble-horizontal">Wobble Horizontal</a>	<a rel="wobble-vertical" class="button wobble-vertical">Wobble Vertical</a>	<a rel="wobble-top" class="button wobble-top">Wobble Top</a>	<a rel="wobble-bottom" class="button wobble-bottom">Wobble Bottom</a>	<h2>Border Transitions</h2>	<a rel="border-fade" class="button border-fade">Border Fade</a>	<a rel="hollow" class="button hollow">Hollow</a>	<a rel="trim" class="button trim">Trim</a>	<a rel="outline-outward" class="button outline-outward">Outline Outward</a>	<a rel="outline-inward" class="button outline-inward">Outline Inward</a>	<a rel="round-corners" class="button round-corners">Round Corners</a>	<h2>Shadow and Glow Transitions</h2>	<a rel="glow" class="button glow">Glow</a>	<a rel="box-shadow-outset" class="button box-shadow-outset">Box Shadow Outset</a>	<a rel="box-shadow-inset" class="button box-shadow-inset">Box Shadow Inset</a>	<a rel="float-shadow" class="button float-shadow">Float Shadow</a>	<a rel="hover-shadow" class="button hover-shadow">Hover Shadow</a>	<a rel="shadow-radial" class="button shadow-radial">Shadow Radial</a>	<h2>Speech Bubbles</h2>	<a rel="bubble-top" class="button bubble-top">Bubble Top</a>	<a rel="bubble-right" class="button bubble-right">Bubble Right</a>	<a rel="bubble-bottom" class="button bubble-bottom">Bubble Bottom</a>	<a rel="bubble-left" class="button bubble-left">Bubble Left</a>	<a rel="bubble-float-top" class="button bubble-float-top">Bubble Float Top</a>	<a rel="bubble-float-right" class="button bubble-float-right">Bubble Float Right</a>	<a rel="bubble-float-bottom" class="button bubble-float-bottom">Bubble Float Bottom</a>	<a rel="bubble-float-left" class="button bubble-float-left">Bubble Float Left</a>	<h2>Curls</h2>	<a rel="curl-top-left" class="button curl-top-left">Curl Top Left</a>	<a rel="curl-top-right" class="button curl-top-right">Curl Top Right</a>	<a rel="curl-bottom-right" class="button curl-bottom-right">Curl Bottom Right</a>	<a rel="curl-bottom-left" class="button curl-bottom-left">Curl Bottom Left</a>
<div class="aligncenter">	<a class="button cta hover-shadow" href="https://github.com/IanLunn/Hover">Download on GitHub</a>	</div>
<div class="footer">	<div class="about">	<h2>About Hover.css</h2>	<p>All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS and SASS flavours.</p>	<p>For best results, hover effects use a couple of "hacks" (undesirable but usually necessary lines of code). For more information on these hacks and whether you need them, please read the FAQ.</p>	<p>Many effects use CSS3 features such as transitions, transforms and animations. Old browsers that don't support these features may need some extra attention to be certain a fallback hover effect is still in place.</p>	<h3>License</h3>	<p>hover.css is open source, and made available under a <a href="https://www.opensource.org/licenses/mit-license.php">MIT License</a>. Distribute, use as-is, or modify to your liking in personal and commercial projects. Please retain the original readme and license files.	<p>Placing author information in your stylesheet, credits page or humans.txt is much appreciated.</p>	</div>	<div class="social aligncenter">	<div class="social-button">	<iframe src="http://ghbtns.com/github-btn.html?user=IanLunn&repo=Hover&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="140" height="20"></iframe>	</div>	<div class="social-button">	<iframe src="http://ghbtns.com/github-btn.html?user=IanLunn&repo=Hover&type=fork" allowtransparency="true" frameborder="0" scrolling="0" width="140" height="20"></iframe>	</div>	<div class="social-button">	<a href="https://twitter.com/share" class="twitter-share-button" data-related="IanLunn" data-dnt="true">Tweet</a>	<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>	</div>	<div class="social-button">	<a href="https://twitter.com/IanLunn" class="twitter-follow-button" data-show-count="false" data-dnt="true">Follow @IanLunn</a>	<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>	</div>	</div>	<div class="author">	<a class="logo" href="https://ianlunn.co.uk/" title="Visit portfolio of Ian Lunn"><img class="hover" src="https://ianlunn.github.io/Hover/logo-transparent.png" width="60" height="60" /></a>	<p class="credit">Created by <a href="https://ianlunn.co.uk/" title="Visit portfolio of Ian Lunn">Ian Lunn</a> - Front End Web Developer</p>	</div>	</div>	<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-11991680-4', 'ianlunn.github.io'); ga('send', 'pageview');	</script>
</body>
</html>

Hover.css - Script Codes CSS Codes

/* * Hover.css (https://ianlunn.co.uk/) * Version: 1.0 * Author: Ian Lunn @IanLunn * Author URL: https://ianlunn.co.uk/ * Github: https://github.com/IanLunn/Hover * Made available under a MIT License: * https://www.opensource.org/licenses/mit-license.php * Hover.css Copyright Ian Lunn 2014. */
/* Default styles for the demo buttons */
.button { margin: .4em; padding: 1em; cursor: pointer; background: #ececec; text-decoration: none; color: #666;
}
/* 2D TRANSITIONS */
/* Grow */
.grow { display: inline-block; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.grow:hover { transform: scale(1.1);
}
/* Shrink */
.shrink { display: inline-block; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.shrink:hover { transform: scale(0.9);
}
/* Pulse */
@keyframes pulse { 25% { transform: scale(1.1); } 75% { transform: scale(0.9); }
}
.pulse { display: inline-block; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.pulse:hover { animation-name: pulse; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite;
}
/* Pulse Grow */
@keyframes pulse-grow { to { transform: scale(1.1); }
}
.pulse-grow { display: inline-block; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.pulse-grow:hover { animation-name: pulse-grow; animation-duration: 0.3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate;
}
/* Pulse Shrink */
@keyframes pulse-shrink { to { transform: scale(0.9); }
}
.pulse-shrink { display: inline-block; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.pulse-shrink:hover { animation-name: pulse-shrink; animation-duration: 0.3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate;
}
/* Push */
@keyframes push { 50% { transform: scale(0.8); } 100% { transform: scale(1); }
}
.push { display: inline-block; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.push:hover { animation-name: push; animation-duration: 0.3s; animation-timing-function: linear; animation-iteration-count: 1;
}
/* Pop */
@keyframes pop { 50% { transform: scale(1.2); } 100% { transform: scale(1); }
}
.pop { display: inline-block; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.pop:hover { animation-name: pop; animation-duration: 0.3s; animation-timing-function: linear; animation-iteration-count: 1;
}
/* Rotate */
.rotate { display: inline-block; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.rotate:hover { transform: rotate(4deg);
}
/* Grow Rotate */
.grow-rotate { display: inline-block; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.grow-rotate:hover { transform: scale(1.1) rotate(4deg);
}
/* Float */
.float { display: inline-block; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.float:hover { transform: translateY(-5px);
}
/* Sink */
.sink { display: inline-block; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.sink:hover { transform: translateY(5px);
}
/* Hover */
@keyframes hover { 50% { transform: translateY(-3px); } 100% { transform: translateY(-6px); }
}
.hover { display: inline-block; transition-duration: .5s; transition-property: transform; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.hover:hover { transform: translateY(-6px); animation-name: hover; animation-duration: 1.5s; animation-delay: 0.3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate;
}
/* Hang */
@keyframes hang { 50% { transform: translateY(3px); } 100% { transform: translateY(6px); }
}
.hang { display: inline-block; transition-duration: .5s; transition-property: transform; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.hang:hover { transform: translateY(6px); animation-name: hang; animation-duration: 1.5s; animation-delay: 0.3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate;
}
/* Skew */
.skew { display: inline-block; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.skew:hover { transform: skew(-10deg);
}
/* Skew Forward */
.skew-forward { display: inline-block; transition-duration: 0.3s; transition-property: transform; transform-origin: 0 100%; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.skew-forward:hover { transform: skew(-10deg);
}
/* Wobble Vertical */
@keyframes wobble-vertical { 16.65% { transform: translateY(8px); } 33.3% { transform: translateY(-6px); } 49.95% { transform: translateY(4px); } 66.6% { transform: translateY(-2px); } 83.25% { transform: translateY(1px); } 100% { transform: translateY(0); }
}
.wobble-vertical { display: inline-block; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.wobble-vertical:hover { animation-name: wobble-vertical; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1;
}
/* Wobble Horizontal */
@keyframes wobble-horizontal { 16.65% { transform: translateX(8px); } 33.3% { transform: translateX(-6px); } 49.95% { transform: translateX(4px); } 66.6% { transform: translateX(-2px); } 83.25% { transform: translateX(1px); } 100% { transform: translateX(0); }
}
.wobble-horizontal { display: inline-block; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.wobble-horizontal:hover { animation-name: wobble-horizontal; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1;
}
/* Wobble Top */
@keyframes wobble-top { 16.65% { transform: skew(-12deg); } 33.3% { transform: skew(10deg); } 49.95% { transform: skew(-6deg); } 66.6% { transform: skew(4deg); } 83.25% { transform: skew(-2deg); } 100% { transform: skew(0); }
}
.wobble-top { display: inline-block; transform-origin: 0 100%; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.wobble-top:hover { animation-name: wobble-top; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1;
}
/* Wobble Bottom */
@keyframes wobble-bottom { 16.65% { transform: skew(-12deg); } 33.3% { transform: skew(10deg); } 49.95% { transform: skew(-6deg); } 66.6% { transform: skew(4deg); } 83.25% { transform: skew(-2deg); } 100% { transform: skew(0); }
}
.wobble-bottom { display: inline-block; transform-origin: 100% 0; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.wobble-bottom:hover { animation-name: wobble-bottom; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1;
}
/* BORDER TRANSITIONS */
/* Border Fade */
.border-fade { display: inline-block; transition-duration: 0.3s; transition-property: box-shadow; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: inset 0 0 0 4px #ececec, 0 0 1px transparent; /* Hack to improve aliasing on mobile/tablet devices */
}
.border-fade:hover { box-shadow: inset 0 0 0 4px #666, 0 0 1px transparent; /* Hack to improve aliasing on mobile/tablet devices */
}
/* Hollow */
.hollow { display: inline-block; transition-duration: 0.3s; transition-property: background; transform: translateZ(0); /* Hack to improve performance on mobile/tablet devices */ box-shadow: inset 0 0 0 4px #ececec, 0 0 1px transparent; /* Hack to improve aliasing on mobile/tablet devices */
}
.hollow:hover { background: none;
}
/* Trim */
.trim { display: inline-block; position: relative; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.trim:before { content: ''; position: absolute; border: white solid 4px; top: 4px; left: 4px; right: 4px; bottom: 4px; opacity: 0; transition-duration: 0.3s; transition-property: opacity;
}
.trim:hover:before { opacity: 1;
}
/* Outline Outward */
.outline-outward { display: inline-block; position: relative; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.outline-outward:before { content: ''; position: absolute; border: #ececec solid 4px; top: 0; right: 0; bottom: 0; left: 0; transition-duration: .3s; transition-property: top right bottom left;
}
.outline-outward:hover:before { top: -8px; right: -8px; bottom: -8px; left: -8px;
}
/* Outline Inward */
.outline-inward { display: inline-block; position: relative; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.outline-inward:before { content: ''; position: absolute; border: #ececec solid 4px; top: -16px; right: -16px; bottom: -16px; left: -16px; opacity: 0; transition-duration: .3s; transition-property: top right bottom left;
}
.outline-inward:hover:before { top: -8px; right: -8px; bottom: -8px; left: -8px; opacity: 1;
}
/* Round Corners */
.round-corners { display: inline-block; transition-duration: 0.3s; transition-property: border-radius; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.round-corners:hover { border-radius: 1em;
}
/* SHADOW/GLOW TRANSITIONS */
/* Glow */
.glow { display: inline-block; transition-duration: 0.3s; transition-property: box-shadow; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.glow:hover { box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}
/* Box Shadow Outset */
.box-shadow-outset { display: inline-block; transition-duration: 0.3s; transition-property: box-shadow; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.box-shadow-outset:hover { box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
}
/* Box Shadow Inset */
.box-shadow-inset { display: inline-block; transition-duration: 0.3s; transition-property: box-shadow; box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.6), 0 0 1px transparent; /* Hack to improve aliasing on mobile/tablet devices */ -webkit-tap-highlight-color: transparent; transform: translateZ(0);
}
.box-shadow-inset:hover { box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.6), 0 0 1px transparent; /* Hack to improve aliasing on mobile/tablet devices */
}
/* Float Shadow */
.float-shadow { display: inline-block; position: relative; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.float-shadow:before { pointer-events: none; position: absolute; z-index: -1; content: ''; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); /* W3C */ transition-duration: 0.3s; transition-property: transform opacity;
}
.float-shadow:hover { transform: translateY(-5px); /* move the element up by 5px */
}
.float-shadow:hover:before { opacity: 1; transform: translateY(5px); /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}
/* Hover Shadow */
@keyframes hover { 50% { transform: translateY(-3px); } 100% { transform: translateY(-6px); }
}
@keyframes hover-shadow { 0% { transform: translateY(6px); opacity: .4; } 50% { transform: translateY(3px); opacity: 1; } 100% { transform: translateY(6px); opacity: .4; }
}
.hover-shadow { display: inline-block; position: relative; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.hover-shadow:before { pointer-events: none; position: absolute; z-index: -1; content: ''; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); /* W3C */ transition-duration: 0.3s; transition-property: transform opacity;
}
.hover-shadow:hover { transform: translateY(-6px); animation-name: hover; animation-duration: 1.5s; animation-delay: 0.3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate;
}
.hover-shadow:hover:before { opacity: .4; transform: translateY(6px); animation-name: hover-shadow; animation-duration: 1.5s; animation-delay: .3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate;
}
/* Shadow Radial */
.shadow-radial { display: inline-block; position: relative; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.shadow-radial:before, .shadow-radial:after { pointer-events: none; position: absolute; content: ''; left: 0; width: 100%; box-sizing: border-box; background-repeat: no-repeat; height: 5px; opacity: 0; transition-duration: 0.3s; transition-property: opacity;
}
.shadow-radial:before { bottom: 100%; background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}
.shadow-radial:after { top: 100%; background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}
.shadow-radial:hover:before, .shadow-radial:hover:after { opacity: 1;
}
/* SPEECH BUBBLES */
/* Bubble Top */
.bubble-top { display: inline-block; position: relative; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.bubble-top:before { pointer-events: none; position: absolute; z-index: -1; content: ''; border-style: solid; transition-duration: 0.3s; left: calc(50% - 10px); border-width: 0 10px 10px 10px; border-color: transparent transparent #ececec transparent; transition-property: top;
}
.bubble-top:hover:before { top: -10px;
}
/* Bubble Right */
.bubble-right { display: inline-block; position: relative; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.bubble-right:before { pointer-events: none; position: absolute; z-index: -1; content: ''; border-style: solid; transition-duration: 0.3s; transition-property: right; top: calc(50% - 10px); right: 0; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #ececec;
}
.bubble-right:hover:before { right: -10px;
}
/* Bubble Bottom */
.bubble-bottom { display: inline-block; position: relative; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.bubble-bottom:before { pointer-events: none; position: absolute; z-index: -1; content: ''; border-style: solid; transition-duration: 0.3s; transition-property: bottom; left: calc(50% - 10px); bottom: 0; border-width: 10px 10px 0 10px; border-color: #ececec transparent transparent transparent;
}
.bubble-bottom:hover:before { bottom: -10px;
}
/* Bubble Left */
.bubble-left { display: inline-block; position: relative; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.bubble-left:before { pointer-events: none; position: absolute; z-index: -1; content: ''; border-style: solid; transition-duration: 0.3s; transition-property: left; top: calc(50% - 10px); left: 0; border-width: 10px 10px 10px 0; border-color: transparent #ececec transparent transparent;
}
.bubble-left:hover:before { left: -10px;
}
/* Bubble Float Top */
.bubble-float-top { display: inline-block; position: relative; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.bubble-float-top:before { pointer-events: none; position: absolute; z-index: -1; content: ''; left: calc(50% - 10px); top: 0; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #ececec transparent; transition-duration: 0.3s; transition-property: top;
}
.bubble-float-top:hover { transform: translateY(5px) translateZ(0);
}
.bubble-float-top:hover:before { top: -10px;
}
/* Bubble Float Right */
.bubble-float-right { display: inline-block; position: relative; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.bubble-float-right:before { pointer-events: none; position: absolute; z-index: -1; top: calc(50% - 10px); right: 0; content: ''; border-style: solid; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #ececec; transition-duration: 0.3s; transition-property: right;
}
.bubble-float-right:hover { transform: translateX(-5px);
}
.bubble-float-right:hover:before { right: -10px;
}
/* Bubble Float Bottom */
.bubble-float-bottom { display: inline-block; position: relative; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.bubble-float-bottom:before { pointer-events: none; position: absolute; z-index: -1; content: ''; left: calc(50% - 10px); bottom: 0; border-style: solid; border-width: 10px 10px 0 10px; border-color: #ececec transparent transparent transparent; transition-duration: 0.3s; transition-property: bottom;
}
.bubble-float-bottom:hover { transform: translateY(-5px) translateZ(0);
}
.bubble-float-bottom:hover:before { bottom: -10px;
}
/* Bubble Float Left */
.bubble-float-left { display: inline-block; position: relative; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.bubble-float-left:before { pointer-events: none; position: absolute; z-index: -1; content: ''; top: calc(50% - 10px); left: 0; border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent #ececec transparent transparent; transition-duration: 0.3s; transition-property: left;
}
.bubble-float-left:hover { transform: translateX(5px);
}
.bubble-float-left:hover:before { left: -10px;
}
/* CURLS */
/* Curl Top Left */
.curl-top-left { display: inline-block; position: relative; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.curl-top-left:before { pointer-events: none; position: absolute; content: ''; height: 0; width: 0; top: 0; left: 0; background: white; /* IE9 */ background: linear-gradient(135deg, white 45%, #aaa 50%, #ccc 56%, white 80%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000'); /*For IE7-8-9*/ z-index: 1000; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); transition-duration: 0.3s; transition-property: width height;
}
.curl-top-left:hover:before { width: 25px; height: 25px;
}
/* Curl Top Right */
.curl-top-right { display: inline-block; position: relative; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.curl-top-right:before { pointer-events: none; position: absolute; content: ''; height: 0; width: 0; top: 0; right: 0; background: white; /* IE9 */ background: linear-gradient(225deg, white 45%, #aaa 50%, #ccc 56%, white 80%); box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4); transition-duration: 0.3s; transition-property: width height;
}
.curl-top-right:hover:before { width: 25px; height: 25px;
}
/* Curl Bottom Right */
.curl-bottom-right { display: inline-block; position: relative; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.curl-bottom-right:before { pointer-events: none; position: absolute; content: ''; height: 0; width: 0; bottom: 0; right: 0; background: white; /* IE9 */ background: linear-gradient(315deg, white 45%, #aaa 50%, #ccc 56%, white 80%); box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4); transition-duration: 0.3s; transition-property: width height;
}
.curl-bottom-right:hover:before { width: 25px; height: 25px;
}
/* Curl Bottom Left */
.curl-bottom-left { display: inline-block; position: relative; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent;
}
.curl-bottom-left:before { pointer-events: none; position: absolute; content: ''; height: 0; width: 0; bottom: 0; left: 0; background: white; /* IE9 */ background: linear-gradient(45deg, white 45%, #aaa 50%, #ccc 56%, white 80%); box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4); transition-duration: 0.3s; transition-property: width height;
}
.curl-bottom-left:hover:before { width: 25px; height: 25px;
}
.link { display: block; width: 100%; text-align: center;
}
.link a { font-weight: bold;
}
#forkongithub a { background: #000; color: #fff; text-decoration: none; font-family: arial, sans-serif; text-align: center; font-weight: bold; padding: 5px 40px; font-size: 1rem; line-height: 2rem; position: relative; transition: 0.5s;
}
#forkongithub a:hover { background: #060; color: #fff;
}
#forkongithub a::before, #forkongithub a::after { content: ""; width: 100%; display: block; position: absolute; top: 1px; left: 0; height: 1px; background: #fff;
}
#forkongithub a::after { bottom: 1px; top: auto;
}
@media screen and (min-width: 800px) { #forkongithub { position: absolute; display: block; top: 0; right: 0; width: 200px; overflow: hidden; height: 200px; } #forkongithub a { width: 200px; position: absolute; top: 60px; right: -60px; transform: rotate(45deg); -webkit-transform: rotate(45deg); box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8); }
}
Hover.css - Script Codes
Hover.css - Script Codes
Home Page Home
Developer Shannon Range
Username silentkrange
Uploaded November 10, 2022
Rating 3
Size 13,814 Kb
Views 24,288
Do you need developer help for Hover.css?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Shannon Range (silentkrange) Script Codes
Name
SVG line graph
Info card jquery slideToggle
D3 Bar Chart - Poverty Rate - FINAL
D3 Productivity-Wage Gap bar chart
Ammap3 - US heat map
A Pen by Shannon Range
Ask New Questions
Animated line graph with HighCharts
D3 again -
JQuery Slideshow for SpeedBumps Interactive
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!