<div class="example-cntr">
<h1>CSS <code>:hover</code> pseudo-class</h1>
<p>The <code>:hover</code> pseudo-class is used to style an element when the pointer is over it. It doesn’t have to be used with links, albeit is the most common use case.</p>
<p>This pseudo-class has to got be one of the most, if not THE most, versatile feature of CSS since so many great things can be accomplished with this pseudo-class.</p>
<!-- Fancy effect -->
<h3>Fancy effect</h3>
<section class="fancy-ctnr flex-ctnr">
<!-- "Guillotine" style -->
<a href="https://tympanus.net/Tutorials/ShapeHoverEffectSVG/index.html" target="_blank" title="Link opens in a new tab" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z">
<figure>
<img src="http://lorempixel.com/300/400/technics/2">
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
<figcaption>
<h2>Hover effect using SVG</h2>
<p>Guillotine shape</p>
<span class="button">View Article on Tympanus.net</span>
</figcaption>
</figure>
</a>
<!-- "Bubble" style -->
<a href="https://tympanus.net/Tutorials/ShapeHoverEffectSVG/index2.html" target="_blank" title="Link opens in a new tab" data-path-hover="m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
<figure>
<img src="http://lorempixel.com/300/400/technics/2">
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"/></svg>
<figcaption>
<h2>Hover effect using SVG</h2>
<p>Bubble shape</p>
<span class="button">View Article on Tympanus.net</span>
</figcaption>
</figure>
</a>
</section>
<!-- Navigation bars -->
<h3>Navigation bars</h3>
<section class="flex-ctnr nav-bars">
<ul class="hvr-underline-from-left">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
<ul class="hvr-shutter-out-horizontal">
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
</ul>
</section>
<!-- Images -->
<h3>Images</h3>
<section class="flex-ctnr images">
<a href="#" class="zoom"><img src="http://lorempixel.com/300/200/technics/2"></a>
<a href="#" class="sepia"><img src="http://lorempixel.com/300/200/fashion/7"></a>
</section>
</div>
/* Hover effects using SVG
Adapted from "Shape Hover Effect with SVG" - https://tympanus.net/codrops/2014/01/07/shape-hover-effect-with-svg/ */
/* Fancy effect */
.fancy-ctnr { margin: auto;
figure {
position: relative;
overflow: hidden;
margin: 5px;
background: #333;
img {
position: relative;
display: block;
width: 100%;
opacity: .7;
transition: opacity .3s;
}
}
figcaption {
position: absolute;
top: 0;
z-index: 11;
padding: 10px;
width: 100%;
height: 100%;
text-align: center;
h2 {
margin: 0;
color: black;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 300;
font-size: 130%;
transition: transform .3s;
transform: translateY(50px);
}
p {
color: rgba(black,.5);
font-size: 20px;
transform: translateY(50px);
}
}
figure .button {
width: 90%;
padding: 10px;
position: absolute;
border: none;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
transition: opacity .3s, transform .3s;
}
figcaption, h2, p figure .button { backface-visibility: hidden; }
svg {
position: absolute;
top: -1px;
/* fixes rendering issue in FF */
z-index: 10;
width: 100%;
height: 100%;
path { fill: $y; }
}
a:hover {
figure img { opacity: 1; }
figcaption {
h2 { transform: translateY(0); }
p {
transform: translateY(0);
opacity: 0;
}
}
}
figure .button {
top: 50%;
left: 50%;
border: 3px solid #fff;
background: rgba(white, 0.7);
color: black;
opacity: 0;
transform: translateY(-50%) translateX(-50%) scale(0.25);
}
a:hover figure .button {
opacity: 1;
transform: translateY(-50%) translateX(-50%) scale(1);
}
}
/* Hover effects on Navigation bars
Adapted from Hover.css - https://ianlunn.github.io/Hover/ */
/* Underline From Left */
.hvr-underline-from-left {
a {
display: inline-block;
vertical-align: middle;
backface-visibility: hidden;
transform: translateZ(0);
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
&:before {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
bottom: 0;
background: $y;
height: 4px;
transition-property: right;
transition-duration: .4s;
transition-timing-function: ease-out;
}
&:hover:before,
&:focus:before,
&:active:before { right: 0; }
}
}
/* Shutter Out Horizontal */
.hvr-shutter-out-horizontal {
a {
display: inline-block;
vertical-align: middle;
backface-visibility: hidden;
transform: translateZ(0);
-moz-osx-font-smoothing: grayscale;
position: relative;
background: #333;
transition-property: color;
transition-duration: 0.3s;
&:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: $r;
transform: scaleX(0);
transform-origin: 50%;
transition-property: transform;
transition-duration: .2s;
transition-timing-function: ease-out;
}
&:hover,
&:focus,
&:active {
color: white;
}
&:hover:before,
&:focus:before,
&:active:before {
transform: scaleX(1);
}
}
}
/* Hover effects on Images
Adapted from @nxworld's Pen: "demo:CSS image hover effects" https://codepen.io/nxworld/pen/ZYNOBZ */
/* Zoom In */
.zoom {
display: inline-block;
width: 300px; height: 200px;
overflow: hidden;
img {
transform: scale(1);
transition: .4s ease-in-out;
}
& img:hover {
transform: scale(1.3);
}
}
/* Sepia */
.sepia {
img {
display: block;
filter: sepia(1);
transition: .3s ease-in-out;
}
&:hover img {
filter: sepia(0);
}
}
//Styling stuff not needed for demo
body {
text-align: left;
line-height: 1.5;
}
a { text-decoration: none; }
h1 {
font-size: 22px;
text-transform: none;
border-bottom: #636363 1px dotted;
code {
display: inline-block;
margin-bottom: 10px;
color: $y;
background: none;
box-shadow: none;
}
}
h3 {
padding-bottom: 5px;
border-bottom: #444 1px solid;
font-family: Georgia;
font-style: italic;
}
code { font-size: 1em; }
ul:not(.normal) {
padding: 0;
list-style-type: none;
}
.example-cntr {
max-width: 800px;
margin: 0 auto 50px;
padding: 30px;
box-shadow: 0 1px 2px rgba(black,.3);
background: rgba(black,.15);
& > code {
display: block;
margin-bottom: 10px;
font-size: 22px;
color: $y;
background: none;
box-shadow: none;
}
}
.flex-ctnr {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
//All navigation bars
.nav-bars {
ul {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 45%;
}
li {
flex-grow: 1;
margin: 1%;
text-align: center;
}
a {
display: block;
padding: 10px;
background: rgba(black,.1);
}
}
View Compiled
//This uses SnapSVG.js
(function() {
function init() {
var speed = 250,
easing = mina.easeinout;
[].slice.call(document.querySelectorAll('.fancy-ctnr > a')).forEach(function(el) {
var s = Snap(el.querySelector('svg')),
path = s.select('path'),
pathConfig = {
from: path.attr('d'),
to: el.getAttribute('data-path-hover')
};
el.addEventListener('mouseenter', function() {
path.animate({
'path': pathConfig.to
}, speed, easing);
});
el.addEventListener('mouseleave', function() {
path.animate({
'path': pathConfig.from
}, speed, easing);
});
});
}
init();
})();
