Animated Hover Effects

Developer
Luke Watts
Size
9,360 Kb
Views
50,600
  1. Animated Hover Effects Previews
  2. Animated Hover Effects HTML Codes
  3. Animated Hover Effects CSS Codes

How do I make an animated hover effects?

What is a animated hover effects? How do you make a animated hover effects? This script and codes were developed by Luke Watts on 14 August 2022, Sunday.

Animated Hover Effects Previews
IQ Test

Animated Hover Effects - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Hover Effects</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">	<header>	<h1>Creative Link Effects <span>Subtle and modern effects for links or menu items</span></h1>	<p>Please note that not every browser supports transitions on pseudo elements.</p>	</header>	<section class="color-1">	<nav class="effect-1" id="effect-1">	<a href="#effect-1">Wafture</a>	<a href="#effect-1">Sumptuous</a>	<a href="#effect-1">Scintilla</a>	<a href="#effect-1">Propinquity</a>	<a href="#effect-1">Harbinger</a>	</nav>	</section>	<section class="color-4">	<nav class="effect-2" id="effect-2">	<a href="#effect-2"><span data-hover="Ratatouille">Ratatouille</span></a>	<a href="#effect-2"><span data-hover="Lassitude">Lassitude</span></a>	<a href="#effect-2"><span data-hover="Murmurous">Murmurous</span></a>	<a href="#effect-2"><span data-hover="Palimpsest">Palimpsest</span></a>	<a href="#effect-2"><span data-hover="Assemblage">Assemblage</span></a>	</nav>	</section>	<section class="color-6">	<nav class="effect-3" id="effect-3">	<a href="#effect-3">Palimpsest</a>	<a href="#effect-3">Ineffable</a>	<a href="#effect-3">Lilt</a>	<a href="#effect-3">Mellifluous</a>	<a href="#effect-3">Serendipity</a>	</nav>	</section>	<section class="color-7">	<nav class="effect-4" id="effect-4">	<a href="#effect-4">Woebegone</a>	<a href="#effect-4">Lassitude</a>	<a href="#effect-4">Murmurous</a>	<a href="#effect-4">Palimpsest</a>	<a href="#effect-4">Assemblage</a>	</nav>	</section>	<section class="color-5">	<nav class="effect-5" id="effect-5">	<a href="#effect-5"><span data-hover="Seraglio">Seraglio</span></a>	<a href="#effect-5"><span data-hover="Sumptuous">Sumptuous</span></a>	<a href="#effect-5"><span data-hover="Scintilla">Scintilla</span></a>	<a href="#effect-5"><span data-hover="Palimpsest">Palimpsest</span></a>	<a href="#effect-5"><span data-hover="Assemblage">Assemblage</span></a>	</nav>	</section>	<section class="color-4">	<nav class="effect-6" id="effect-6">	<a href="#effect-6">Umbrella</a>	<a href="#effect-6">Ineffable</a>	<a href="#effect-6">Lilt</a>	<a href="#effect-6">Mellifluous</a>	<a href="#effect-6">Serendipity</a>	</nav>	</section>	<section class="color-8">	<nav class="effect-7" id="effect-7">	<a href="#effect-7">Languor</a>	<a href="#effect-7">Lassitude</a>	<a href="#effect-7">Murmurous</a>	<a href="#effect-7">Palimpsest</a>	<a href="#effect-7">Assemblage</a>	</nav>	</section>	<section class="color-1">	<nav class="cl-effect-8" id="cl-effect-8">	<a href="#cl-effect-8">Imbue</a>	<a href="#cl-effect-8">Sumptuous</a>	<a href="#cl-effect-8">Scintilla</a>	<a href="#cl-effect-8">Propinquity</a>	<a href="#cl-effect-8">Harbinger</a>	</nav>	</section>	<section class="color-9">	<nav class="cl-effect-9" id="cl-effect-9">	<a href="#cl-effect-9"><span>Gossamer</span><span>Sumptuous Heart</span></a>	<a href="#cl-effect-9"><span>Ineffable</span><span>Evanescent Life</span></a>	<a href="#cl-effect-9"><span>Chatoyant</span><span>Assemblage Love</span></a>	<a href="#cl-effect-9"><span>Mellifluous</span><span>Mellifluous Will</span></a>	<a href="#cl-effect-9"><span>Serendipity</span><span>Serendipity Cut</span></a>	</nav>	</section>	<section class="color-10">	<nav class="cl-effect-10" id="cl-effect-10">	<a href="#cl-effect-10" data-hover="Seraglio"><span>Seraglio</span></a>	<a href="#cl-effect-10" data-hover="Sumptuous"><span>Sumptuous</span></a>	<a href="#cl-effect-10" data-hover="Scintilla"><span>Scintilla</span></a>	<a href="#cl-effect-10" data-hover="Palimpsest"><span>Palimpsest</span></a>	<a href="#cl-effect-10" data-hover="Assemblage"><span>Assemblage</span></a>	</nav>	</section>	<section class="color-4">	<nav class="cl-effect-11" id="cl-effect-11">	<a href="#cl-effect-11" data-hover="Desultory">Desultory</a>	<a href="#cl-effect-11" data-hover="Sumptuous">Sumptuous</a>	<a href="#cl-effect-11" data-hover="Scintilla">Scintilla</a>	<a href="#cl-effect-11" data-hover="Propinquity">Propinquity</a>	<a href="#cl-effect-11" data-hover="Harbinger">Harbinger</a>	</nav>	</section>	<section class="color-5">	<nav class="cl-effect-12" id="cl-effect-12">	<a href="#cl-effect-12">Chatoyant</a>	<a href="#cl-effect-12">Ineffable</a>	<a href="#cl-effect-12">Efficiency</a>	<a href="#cl-effect-12">Mellifluous</a>	<a href="#cl-effect-12">Serendipity</a>	</nav>	</section>	<section class="color-6">	<nav class="cl-effect-13" id="cl-effect-13">	<a href="#cl-effect-13">Beleaguer</a>	<a href="#cl-effect-13">Lassitude</a>	<a href="#cl-effect-13">Murmurous</a>	<a href="#cl-effect-13">Palimpsest</a>	<a href="#cl-effect-13">Assemblage</a>	</nav>	</section>	<section class="color-1">	<nav class="cl-effect-14" id="cl-effect-14">	<a href="#cl-effect-14">Ailurophile</a>	<a href="#cl-effect-14">Sumptuous</a>	<a href="#cl-effect-14">Scintilla</a>	<a href="#cl-effect-14">Propinquity</a>	<a href="#cl-effect-14">Harbinger</a>	</nav>	</section>	<section class="color-3">	<nav class="cl-effect-15" id="cl-effect-15">	<a href="#cl-effect-15" data-hover="Desultory">Desultory</a>	<a href="#cl-effect-15" data-hover="Sumptuous">Sumptuous</a>	<a href="#cl-effect-15" data-hover="Scintilla">Scintilla</a>	<a href="#cl-effect-15" data-hover="Propinquity">Propinquity</a>	<a href="#cl-effect-15" data-hover="Harbinger">Harbinger</a>	</nav>	</section>	<section class="color-11">	<nav class="cl-effect-16" id="cl-effect-16">	<a href="#cl-effect-16" data-hover="Languor">Languor</a>	<a href="#cl-effect-16" data-hover="Murmurous">Murmurous</a>	<a href="#cl-effect-16" data-hover="Lassitude">Lassitude</a>	<a href="#cl-effect-16" data-hover="Chatoyant">Chatoyant</a>	<a href="#cl-effect-16" data-hover="Palimpsest">Palimpsest</a>	</nav>	</section>	<section class="color-4">	<nav class="cl-effect-17" id="cl-effect-17">	<a href="#cl-effect-17" data-hover="Languor">Languor</a>	<a href="#cl-effect-17" data-hover="Murmurous">Murmurous</a>	<a href="#cl-effect-17" data-hover="Lassitude">Lassitude</a>	<a href="#cl-effect-17" data-hover="Chatoyant">Chatoyant</a>	<a href="#cl-effect-17" data-hover="Palimpsest">Palimpsest</a>	</nav>	</section>	<section class="color-6">	<nav class="cl-effect-18" id="cl-effect-18">	<a href="#cl-effect-18" data-hover="Desultory">Desultory</a>	<a href="#cl-effect-18" data-hover="Sumptuous">Sumptuous</a>	<a href="#cl-effect-18" data-hover="Scintilla">Scintilla</a>	<a href="#cl-effect-18" data-hover="Propinquity">Propinquity</a>	<a href="#cl-effect-18" data-hover="Harbinger">Harbinger</a>	</nav>	</section>	<section class="color-5">	<nav class="cl-effect-19" id="cl-effect-19">	<a href="#cl-effect-19"><span data-hover="Ratatouille">Ratatouille</span></a>	<a href="#cl-effect-19"><span data-hover="Lassitude">Lassitude</span></a>	<a href="#cl-effect-19"><span data-hover="Murmurous">Murmurous</span></a>	<a href="#cl-effect-19"><span data-hover="Palimpsest">Palimpsest</span></a>	<a href="#cl-effect-19"><span data-hover="Assemblage">Assemblage</span></a>	</nav>	</section>	<section class="color-1">	<nav class="cl-effect-20" id="cl-effect-20">	<a href="#cl-effect-20"><span data-hover="Beleaguer">Beleaguer</span></a>	<a href="#cl-effect-20"><span data-hover="Scintilla">Scintilla</span></a>	<a href="#cl-effect-20"><span data-hover="Chatoyant">Chatoyant</span></a>	<a href="#cl-effect-20"><span data-hover="Palimpsest">Palimpsest</span></a>	<a href="#cl-effect-20"><span data-hover="Languor">Languor</span></a>	</nav>	</section>	<section class="color-7">	<nav class="cl-effect-21" id="cl-effect-21">	<a href="#cl-effect-21">Chatoyant</a>	<a href="#cl-effect-21">Ineffable</a>	<a href="#cl-effect-21">Efficiency</a>	<a href="#cl-effect-21">Mellifluous</a>	<a href="#cl-effect-21">Serendipity</a>	</nav>	</section>	<section class="color-4">	<p>If you enjoyed these effects you might also like:</p>	<p><a href="http://tympanus.net/Development/CreativeButtons/">Creative Button Styles</a></p>	<p><a href="http://tympanus.net/Development/IconHoverEffects/">Simple Icon Hover Effects</a></p>	</section>	</div><!-- /container --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Animated Hover Effects - Script Codes CSS Codes

@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700|Raleway:400,300,700);
a { text-decoration: none;
}
.container > header,
.container > section p { font-family: 'Lato', Arial, sans-serif;
}
.container > header { margin: 0 auto; padding: 2em; text-align: center; color: #89867e; min-height: 250px; background: rgba(0, 0, 0, 0.05);
}
.container > header h1 { font-size: 2.625em; line-height: 1.3; margin: 0; font-weight: 300;
}
.container > header span { display: block; font-size: 60%; color: #ceccc6; padding: 0 0 0.6em 0.1em;
}
.container > section { margin: 0 auto; padding: 10em 3em; text-align: center;
}
.color-1 { background: #435a6b;
}
.color-2 { background: #f39c12;
}
.color-3 { background: #2ac56c;
}
.color-4 { background: #0e83cd;
}
.color-5 { background: #cd4436;
}
.color-6 { background: #f19f0f;
}
.color-7 { background: #3fa46a;
}
.color-8 { background: #ecf0f1;
}
.color-9 { background: #9e487f;
}
.color-10 { background: #16a085;
}
.color-11 { background: #aab7b7;
}
.container > section p { color: #fff; font-size: 1.3em; font-weight: 300;
}
.container > section p a { color: #fff; font-weight: 700;
}
.container > section p a:hover { color: #0c69a4;
}
@media screen and (max-width: 25em) { .codrops-icon span { display: none; }
}
/* * Components */
*, *:after, *:before { box-sizing: border-box;
}
body { font-family: 'Raleway',sans-serif; background-color: #4095bf;
}
nav a { color: white; display: inline-block; font-size: 1.35em; font-weight: 400; letter-spacing: 1px; margin: 15px 25px; outline: medium none; position: relative; text-decoration: none; text-shadow: 0 0 1px rgba(255, 255, 255, 0.3); text-transform: uppercase;
}
nav a:hover, nav a:focus { outline: medium none;
}
/* ============================== * EFFECT 1 * ============================== */
.effect-1 a:before, .effect-1 a:after { display: inline-block; opacity: 0; -webkit-transition: opacity 0.2s ease 0s, -webkit-transform 0.3s ease 0s; transition: opacity 0.2s ease 0s, -webkit-transform 0.3s ease 0s; transition: transform 0.3s ease 0s, opacity 0.2s ease 0s; transition: transform 0.3s ease 0s, opacity 0.2s ease 0s, -webkit-transform 0.3s ease 0s;
}
.effect-1 a:before { content: "["; margin-right: 10px; -webkit-transform: translateX(20px); transform: translateX(20px);
}
.effect-1 a:after { content: "]"; margin-left: 10px; -webkit-transform: translateX(-20px); transform: translateX(-20px);
}
.effect-1 a:hover:before, .effect-1 a:hover:after, .effect-1 a:focus:before, .effect-1 a:focus:after { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px);
}
/* ============================== * EFFECT 2 * ============================== */
.effect-2 a { line-height: 44px; -webkit-perspective: 1000px; perspective: 1000px;
}
.effect-2 a span { background: none repeat scroll 0 0 #2196de; display: inline-block; padding: 0 14px; position: relative; -webkit-transform-origin: 50% 0 0; transform-origin: 50% 0 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: -webkit-transform 0.3s ease 0s; transition: -webkit-transform 0.3s ease 0s; transition: transform 0.3s ease 0s; transition: transform 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
}
.effect-2 a span:before { background: none repeat scroll 0 0 #09669f; content: attr(data-hover); height: 100%; left: 0; position: absolute; top: 100%; -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 50% 0 0; transform-origin: 50% 0 0; -webkit-transition: background 0.3s ease 0s; transition: background 0.3s ease 0s; width: 100%;
}
.effect-2 a:hover span, .effect-2 a:focus span { -webkit-transform: rotateX(90deg) translateY(-22px); transform: rotateX(90deg) translateY(-22px);
}
.effect-2 a:hover span:before, .effect-2 a:focus span:before { background: none repeat scroll 0 0 #2ba3ee;
}
/* ============================== * EFFECT 3 * ============================== */
.effect-3 a { padding: 8px 0;
}
.effect-3 a:after { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1); content: ""; height: 4px; left: 0; opacity: 0; position: absolute; top: 100%; -webkit-transform: translateY(10px); transform: translateY(10px); -webkit-transition: opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s; transition: opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s; transition: opacity 0.3s ease 0s, transform 0.3s ease 0s; transition: opacity 0.3s ease 0s, transform 0.3s ease 0s, -webkit-transform 0.3s ease 0s; width: 100%;
}
.effect-3 a:hover:after, .effect-3 a:focus:after { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px);
}
/* ============================== * EFFECT 4 * ============================== */
.effect-4 a { padding: 0 0 10px;
}
.effect-4 a:after { background: none repeat scroll 0 0 white; content: ""; height: 1px; left: 0; opacity: 0; position: absolute; top: 100%; -webkit-transform: translateY(-10px); transform: translateY(-10px); -webkit-transition: height 0.3s ease 0s, opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s; transition: height 0.3s ease 0s, opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s; transition: height 0.3s ease 0s, opacity 0.3s ease 0s, transform 0.3s ease 0s; transition: height 0.3s ease 0s, opacity 0.3s ease 0s, transform 0.3s ease 0s, -webkit-transform 0.3s ease 0s; width: 100%;
}
.effect-4 a:hover:after, .effect-4 a:focus:after { height: 5px; opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px);
}
/* ============================== * EFFECT 5 * ============================== */
.effect-5 a { height: 1em; overflow: hidden; padding: 0 4px;
}
.effect-5 a span { display: inline-block; position: relative; -webkit-transition: -webkit-transform 0.3s ease 0s; transition: -webkit-transform 0.3s ease 0s; transition: transform 0.3s ease 0s; transition: transform 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
}
.effect-5 a span:before { content: attr(data-hover); font-weight: 700; position: absolute; top: 100%; -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px);
}
.effect-5 a:hover span, .effect-5 a:focus span { -webkit-transform: translateY(-100%); transform: translateY(-100%);
}
/* ============================== * EFFECT 6 * ============================== */
.effect-6 a { margin: 0 10px; padding: 10px 20px;
}
.effect-6 a::before { background: none repeat scroll 0 0 white; content: ""; height: 2px; left: 0; position: absolute; top: 0; -webkit-transition: top 0.3s ease 0s; transition: top 0.3s ease 0s; width: 100%;
}
.effect-6 a::after { background: none repeat scroll 0 0 white; content: ""; height: 2px; left: 0; position: absolute; top: 0; -webkit-transition: height 0.3s ease 0s; transition: height 0.3s ease 0s; width: 2px;
}
.effect-6 a:hover::before { opacity: 1; top: 100%;
}
.effect-6 a:hover::after { height: 100%;
}
/* ============================== * EFFECT 7 * ============================== */
.effect-7 a { color: #566371; font-weight: 700; padding: 12px 10px 10px; text-shadow: none;
}
.effect-7 a::before, .effect-7 a::after { background: none repeat scroll 0 0 #566371; content: ""; height: 3px; left: 0; position: absolute; top: 100%; -webkit-transform: scale(0.85); transform: scale(0.85); -webkit-transition: -webkit-transform 0.3s ease 0s; transition: -webkit-transform 0.3s ease 0s; transition: transform 0.3s ease 0s; transition: transform 0.3s ease 0s, -webkit-transform 0.3s ease 0s; width: 100%;
}
.effect-7 a::after { opacity: 0; -webkit-transition: top 0.3s ease 0s, opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s; transition: top 0.3s ease 0s, opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s; transition: top 0.3s ease 0s, opacity 0.3s ease 0s, transform 0.3s ease 0s; transition: top 0.3s ease 0s, opacity 0.3s ease 0s, transform 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
}
.effect-7 a:hover::before, .effect-7 a:hover::after, .effect-7 a:focus:before, .effect-7 a:focus:after { -webkit-transform: scale(1); transform: scale(1);
}
.effect-7 a:hover::after, .effect-7 a:focus::after { opacity: 1; top: 0;
}
/* ============================== * EFFECT 8 * ============================== */
.cl-effect-8 a { padding: 10px 20px;
}
.cl-effect-8 a:before, .cl-effect-8 a:after { border: 3px solid #344855; content: ""; height: 100%; left: 0; position: absolute; top: 0; -webkit-transition: opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s; transition: opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s; transition: transform 0.3s ease 0s, opacity 0.3s ease 0s; transition: transform 0.3s ease 0s, opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s; width: 100%;
}
.cl-effect-8 a:after { border-color: white; opacity: 0; -webkit-transform: translateY(-7px) translateX(6px); transform: translateY(-7px) translateX(6px);
}
.cl-effect-8 a:hover:before, .cl-effect-8 a:focus:before { opacity: 0; -webkit-transform: translateY(5px) translateX(-5px); transform: translateY(5px) translateX(-5px);
}
.cl-effect-8 a:hover:after, .cl-effect-8 a:focus:after { opacity: 1; -webkit-transform: translateY(0px) translateX(0px); transform: translateY(0px) translateX(0px);
}
.cl-effect-9 a { margin: 0 20px; padding: 18px 20px;
}
.cl-effect-9 a:before, .cl-effect-9 a:after { background: none repeat scroll 0 0 white; content: ""; height: 1px; left: 0; opacity: 0.2; position: absolute; top: 0; -webkit-transition: opacity 0.3s ease 0s, height 0.3s ease 0s; transition: opacity 0.3s ease 0s, height 0.3s ease 0s; width: 100%;
}
.cl-effect-9 a:after { opacity: 0; top: 100%; -webkit-transform: translateY(-10px); transform: translateY(-10px); -webkit-transition: opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s; transition: opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s; transition: transform 0.3s ease 0s, opacity 0.3s ease 0s; transition: transform 0.3s ease 0s, opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
}
.cl-effect-9 a span:first-child { display: block; font-weight: 300; z-index: 2;
}
.cl-effect-9 a span:last-child { color: rgba(0, 0, 0, 0.4); display: block; font-family: Palatino,"Palatino Linotype","Palatino LT STD","Book Antiqua",Georgia,serif; font-size: 0.75em; font-style: italic; opacity: 0; padding: 8px 0 0; text-shadow: none; text-transform: none; -webkit-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s; transition: opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s; transition: transform 0.3s ease 0s, opacity 0.3s ease 0s; transition: transform 0.3s ease 0s, opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s; z-index: 1;
}
.cl-effect-9 a:hover:before, .cl-effect-9 a:focus:before { height: 6px;
}
.cl-effect-9 a:hover:before, .cl-effect-9 a:hover:after, .cl-effect-9 a:focus:before, .cl-effect-9 a:focus:after { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px);
}
.cl-effect-9 a:hover span:last-child, .cl-effect-9 a:focus span:last-child { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%);
}
.cl-effect-10 { position: relative; z-index: 1;
}
.cl-effect-10 a { margin: 0 15px; overflow: hidden;
}
.cl-effect-10 a span { background: none repeat scroll 0 0 #0f7b65; display: block; padding: 10px 20px; -webkit-transition: -webkit-transform 0.3s ease 0s; transition: -webkit-transform 0.3s ease 0s; transition: transform 0.3s ease 0s; transition: transform 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
}
.cl-effect-10 a:before { background: none repeat scroll 0 0 white; color: #0f7b65; content: attr(data-hover); height: 100%; left: 0; padding: 10px 20px; position: absolute; top: 0; -webkit-transition: -webkit-transform 0.3s ease 0s; transition: -webkit-transform 0.3s ease 0s; transition: transform 0.3s ease 0s; transition: transform 0.3s ease 0s, -webkit-transform 0.3s ease 0s; width: 100%; z-index: -1;
}
.cl-effect-10 a:hover span, .cl-effect-10 a:focus span { -webkit-transform: translateX(100%); transform: translateX(100%);
}
.cl-effect-10 a:hover:before, .cl-effect-10 a:focus:before { -webkit-transform: translateX(0%); transform: translateX(0%);
}
.cl-effect-11 a { border-top: 2px solid #0972b3; color: #0972b3; padding: 10px 0; text-shadow: none;
}
.cl-effect-11 a:before { border-bottom: 2px solid white; color: white; content: attr(data-hover); left: 0; max-width: 0; overflow: hidden; padding: 10px 0; position: absolute; top: 0; -webkit-transition: max-width 0.5s ease 0s; transition: max-width 0.5s ease 0s;
}
.cl-effect-11 a:hover:before, .cl-effect-11 a:focus:before { max-width: 100%;
}
.cl-effect-12 a:before, .cl-effect-12 a:after { border: 2px solid rgba(0, 0, 0, 0.1); border-radius: 50%; content: ""; height: 100px; left: 50%; opacity: 0; position: absolute; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2); transform: translateX(-50%) translateY(-50%) scale(0.2); -webkit-transition: opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s; transition: opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s; transition: transform 0.3s ease 0s, opacity 0.3s ease 0s; transition: transform 0.3s ease 0s, opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s; width: 100px;
}
.cl-effect-12 a:after { border-width: 6px; height: 90px; -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8); transform: translateX(-50%) translateY(-50%) scale(0.8); width: 90px;
}
.cl-effect-12 a:hover:before, .cl-effect-12 a:hover:after, .cl-effect-12 a:focus:before, .cl-effect-12 a:focus:after { opacity: 1; -webkit-transform: translateX(-50%) translateY(-50%) scale(1); transform: translateX(-50%) translateY(-50%) scale(1);
}
.cl-effect-13 a { -webkit-transition: color 0.3s ease 0s; transition: color 0.3s ease 0s;
}
.cl-effect-13 a:before { color: transparent; content: "•"; font-size: 1.2em; left: 50%; pointer-events: none; position: absolute; text-shadow: 0 0 transparent; top: 100%; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: text-shadow 0.3s ease 0s, color 0.3s ease 0s; transition: text-shadow 0.3s ease 0s, color 0.3s ease 0s;
}
.cl-effect-13 a:hover:before, .cl-effect-13 a:focus:before { color: white; text-shadow: 10px 0 white, -10px 0 white;
}
.cl-effect-13 a:hover, .cl-effect-13 a:focus { color: #b87400;
}
.cl-effect-14 a { height: 45px; line-height: 45px; padding: 0 20px;
}
.cl-effect-14 a:before, .cl-effect-14 a:after { background: none repeat scroll 0 0 white; content: ""; height: 2px; opacity: 0.2; pointer-events: none; position: absolute; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; width: 45px;
}
.cl-effect-14 a:before { left: 0; top: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: 0 0 0; transform-origin: 0 0 0;
}
.cl-effect-14 a:after { bottom: 0; right: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: 100% 0 0; transform-origin: 100% 0 0;
}
.cl-effect-14 a:hover:before, .cl-effect-14 a:hover:after, .cl-effect-14 a:focus:before, .cl-effect-14 a:focus:after { opacity: 1;
}
.cl-effect-14 a:hover:before, .cl-effect-14 a:focus:before { left: 50%; -webkit-transform: rotate(0deg) translateX(-50%); transform: rotate(0deg) translateX(-50%);
}
.cl-effect-14 a:hover:after, .cl-effect-14 a:focus:after { right: 50%; -webkit-transform: rotate(0deg) translateX(50%); transform: rotate(0deg) translateX(50%);
}
.cl-effect-15 a { color: rgba(0, 0, 0, 0.2); font-weight: 700; text-shadow: none;
}
.cl-effect-15 a:before { color: white; content: attr(data-hover); position: absolute; -webkit-transition: opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s; transition: opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s; transition: transform 0.3s ease 0s, opacity 0.3s ease 0s; transition: transform 0.3s ease 0s, opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
}
.cl-effect-15 a:hover:before, .cl-effect-15 a:focus:before { opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9);
}
.cl-effect-16 a { color: #6f8585; text-shadow: 0 0 1px rgba(111, 133, 133, 0.3);
}
.cl-effect-16 a:before { color: white; content: attr(data-hover); opacity: 0; pointer-events: none; position: absolute; text-shadow: 0 0 1px rgba(255, 255, 255, 0.3); -webkit-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg); transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg); -webkit-transition: opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s; transition: opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s; transition: transform 0.3s ease 0s, opacity 0.3s ease 0s; transition: transform 0.3s ease 0s, opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
}
.cl-effect-16 a:hover:before, .cl-effect-16 a:focus:before { opacity: 1; -webkit-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg); transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
}
.cl-effect-17 a { color: #10659d; padding: 10px 0; text-shadow: none;
}
.cl-effect-17 a:before { color: white; content: attr(data-hover); pointer-events: none; position: absolute; text-shadow: 0 0 1px rgba(255, 255, 255, 0.3); -webkit-transition: opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s; transition: opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s; transition: transform 0.3s ease 0s, opacity 0.3s ease 0s; transition: transform 0.3s ease 0s, opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
}
.cl-effect-17 a:after { background: none repeat scroll 0 0 white; bottom: 0; content: ""; height: 2px; left: 0; opacity: 0; pointer-events: none; position: absolute; -webkit-transform: translateY(5px); transform: translateY(5px); -webkit-transition: opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s; transition: opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s; transition: transform 0.3s ease 0s, opacity 0.3s ease 0s; transition: transform 0.3s ease 0s, opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s; width: 100%;
}
.cl-effect-17 a:hover:before, .cl-effect-17 a:focus:before { opacity: 0; -webkit-transform: translateY(-2px); transform: translateY(-2px);
}
.cl-effect-17 a:hover:after, .cl-effect-17 a:focus:after { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px);
}
.cl-effect-18 { position: relative; z-index: 1;
}
.cl-effect-18 a { color: #b5770d; font-weight: 700; padding: 0 5px; -webkit-transition: color 0.3s ease 0s; transition: color 0.3s ease 0s;
}
.cl-effect-18 a:before, .cl-effect-18 a:after { background: none repeat scroll 0 0 #b5770d; content: ""; height: 2px; left: 0; margin-top: -1px; pointer-events: none; position: absolute; top: 50%; -webkit-transition: opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s; transition: opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s; transition: transform 0.3s ease 0s, opacity 0.3s ease 0s; transition: transform 0.3s ease 0s, opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s; width: 100%; z-index: -1;
}
.cl-effect-18 a:before { -webkit-transform: translateY(-20px); transform: translateY(-20px);
}
.cl-effect-18 a:after { -webkit-transform: translateY(20px); transform: translateY(20px);
}
.cl-effect-18 a:hover, .cl-effect-18 a:focus { color: white;
}
.cl-effect-18 a:hover:before, .cl-effect-18 a:hover:after, .cl-effect-18 a:focus:before, .cl-effect-18 a:focus:after { opacity: 0.7;
}
.cl-effect-18 a:hover:before, .cl-effect-18 a:focus:before { -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.cl-effect-18 a:hover:after, .cl-effect-18 a:focus:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg);
}
.cl-effect-19 a { line-height: 2em; margin: 15px; -webkit-perspective: 800px; perspective: 800px; width: 200px;
}
.cl-effect-19 a span { background: none repeat scroll 0 0 #e25040; display: inline-block; padding: 0 14px; position: relative; -webkit-transform-origin: 50% 50% -100px; transform-origin: 50% 50% -100px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: background 0.4s ease 0s, -webkit-transform 0.4s ease 0s; transition: background 0.4s ease 0s, -webkit-transform 0.4s ease 0s; transition: transform 0.4s ease 0s, background 0.4s ease 0s; transition: transform 0.4s ease 0s, background 0.4s ease 0s, -webkit-transform 0.4s ease 0s; width: 100%;
}
.csstransforms3d .cl-effect-19 a span:before { background: none repeat scroll 0 0 #b43a2d; content: attr(data-hover); height: 100%; left: 100%; pointer-events: none; position: absolute; top: 0; -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transform-origin: 0 50% 0; transform-origin: 0 50% 0; -webkit-transition: background 0.4s ease 0s; transition: background 0.4s ease 0s; width: 100%;
}
.cl-effect-19 a:hover span, .cl-effect-19 a:focus span { background: none repeat scroll 0 0 #b43a2d; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg);
}
.csstransforms3d .cl-effect-19 a:hover span:before, .csstransforms3d .cl-effect-19 a:focus span:before { background: none repeat scroll 0 0 #ef5f52;
}
.cl-effect-20 a { line-height: 2em; -webkit-perspective: 800px; perspective: 800px;
}
.cl-effect-20 a span { background: none repeat scroll 0 0 #587184; box-shadow: 0 3px #2f4351 inset; display: inline-block; padding: 3px 15px 0; position: relative; -webkit-transform-origin: 0 50% 0; transform-origin: 0 50% 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: background 0.6s ease 0s; transition: background 0.6s ease 0s;
}
.cl-effect-20 a span:before { background: none repeat scroll 0 0 white; color: #2f4351; content: attr(data-hover); height: 100%; left: 0; pointer-events: none; position: absolute; top: 0; -webkit-transform: rotateX(270deg); transform: rotateX(270deg); -webkit-transform-origin: 0 0 0; transform-origin: 0 0 0; -webkit-transition: -webkit-transform 0.6s ease 0s; transition: -webkit-transform 0.6s ease 0s; transition: transform 0.6s ease 0s; transition: transform 0.6s ease 0s, -webkit-transform 0.6s ease 0s; width: 100%;
}
.cl-effect-20 a:hover span, .cl-effect-20 a:focus span { background: none repeat scroll 0 0 #2f4351;
}
.cl-effect-20 a:hover span:before, .cl-effect-20 a:focus span:before { -webkit-transform: rotateX(10deg); transform: rotateX(10deg);
}
.cl-effect-21 a { color: #237647; font-weight: 700; padding: 10px; text-shadow: none; -webkit-transition: color 0.3s ease 0s; transition: color 0.3s ease 0s;
}
.cl-effect-21 a:before, .cl-effect-21 a:after { background: none repeat scroll 0 0 white; content: ""; height: 2px; left: 0; opacity: 0; position: absolute; -webkit-transform: translateY(-10px); transform: translateY(-10px); -webkit-transition: opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s; transition: opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s; transition: opacity 0.3s ease 0s, transform 0.3s ease 0s; transition: opacity 0.3s ease 0s, transform 0.3s ease 0s, -webkit-transform 0.3s ease 0s; width: 100%;
}
.cl-effect-21 a:before { top: 0; -webkit-transform: translateY(-10px); transform: translateY(-10px);
}
.cl-effect-21 a:after { bottom: 0; -webkit-transform: translateY(10px); transform: translateY(10px);
}
.cl-effect-21 a:hover, .cl-effect-21 a:focus { color: white;
}
.cl-effect-21 a:hover:before, .cl-effect-21 a:focus:before, .cl-effect-21 a:hover:after, .cl-effect-21 a:focus:after { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px);
}
Animated Hover Effects - Script Codes
Animated Hover Effects - Script Codes
Home Page Home
Developer Luke Watts
Username lukewatts
Uploaded August 14, 2022
Rating 3
Size 9,360 Kb
Views 50,600
Do you need developer help for Animated Hover Effects?

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!

Luke Watts (lukewatts) Script Codes
Name
Footer Concept 02
Product Item Additional Info On Hover
Christmas Countdown
CSS Dark Neon LED Volume Dial
A Pen by Luke Watts
SmartQRTravel Login Form
Affinity4 SVG Logo Animation
Form Inputs
Webkit Background Text Clip
Media Card
Create amazing marketing copy 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!