Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created Aug 27, 2018
Embed
What would you like to do?
Quote hovering
<main class="container">
<section class="effect effect-a">
<h1 class="effect__heading">“Time is a drug. Too much of it kills you.” </h1>
<h2 class="effect__subheading">Terry Pratchett</h2>
</section>
<section class="effect effect-b">
<h1 class="effect__heading">“Sometimes you wake up. Sometimes the fall kills you. And sometimes, when you fall, you fly.” </h1>
<h2 class="effect__subheading"> Neil Gaiman</h2>
</section>
<section class="effect effect-c">
<h1 class="effect__heading">“Pain is inevitable. Suffering is optional.” </h1>
<h2 class="effect__subheading">Haruki Murakami</h2>
</section>
<section class="effect effect-d">
<h1 class="effect__heading">“That's what careless words do. They make people love you a little less.”</h1>
<h2 class="effect__subheading">Arundhati Roy</h2>
</section>
</main>
$easing: cubic-bezier(0.5, 0, 0.5, 1);
.container {
font-family: 'Yrsa', Times New Roman, serif;
width: 100vw;
height: 100vh;
display: grid;
grid-template: 1fr 1fr / 1fr 1fr;
grid-gap: 10px;
background: #ddd;
}
.effect {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 1em;
cursor: pointer;
&__heading {
font-size: 1.5em;
line-height: 1.2;
position: relative;
z-index: 2;
&:after {
content: '';
position: absolute;
}
}
&__subheading {
font-family: 'Hindi', Avenir, sans-serif;
font-size: 1.2em;
line-height: 2;
letter-spacing: 0.04em;
}
}
.effect-a {
opacity: 0.5;
transition: opacity 0.3s $easing;
.effect__heading:after {
opacity: 0;
bottom: 2px;
left: 0;
height: 10px;
width: 100%;
background: #000;
z-index: -1;
transform-origin: 0% 50%;
transform: scaleX(0);
transition: transform 0.5s $easing;
}
.effect__subheading {
opacity: 0;
transform: translateX(-50%);
transition: opacity 0.5s $easing, transform 0.5s $easing;
}
&:hover {
opacity: 1;
.effect__heading:after {
opacity: 0.1;
transform: scaleX(1);
}
.effect__subheading {
transform: translateX(0%);
opacity: 1;
}
}
}
.effect-b {
opacity: 0.5;
transition: opacity 0.3s $easing;
.effect__heading:after {
opacity: 0;
content: '';
font-size: 15em;
line-height: 1;
top: 100%;
left: 50%;
transform-orign: 50% 50%;
transform: translate(-50%, -50%) scale(0.8) rotate(45deg);
transition: opacity 0.5s $easing, transform 0.5s $easing;
}
.effect__subheading {
opacity: 0;
transform: scale(0.8) rotate(25deg);
transition: opacity 0.5s $easing, transform 0.5s $easing;
}
&:hover {
opacity: 1;
.effect__subheading {
transform: scale(1) rotate(0deg);
opacity: 1;
}
.effect__heading:after {
opacity: 0.1;
transform: translate(-50%, -50%) scaleX(1) rotate(0deg);
}
}
}
.effect-c {
opacity: 0.5;
transition: opacity 0.3s $easing;
.effect__heading:after {
opacity: 0;
content: '';
font-size: 4em;
line-height: 1;
top: calc(100% + 20px);
left: calc(100% + 20px);
transform: translate(-50%, 50%) scale(0.8);
transition: opacity 0.5s $easing, transform 0.5s $easing;
}
.effect__heading:before {
position: absolute;
opacity: 0;
content: '';
font-size: 4em;
line-height: 1;
top: 20px;
left: -20px;
transform: translate(-50%, -150%) scale(0.8);
transition: opacity 0.5s $easing, transform 0.5s $easing;
}
.effect__subheading {
opacity: 0;
transform: translateY(100%);
transition: opacity 0.5s $easing, transform 0.5s $easing;
}
&:hover {
opacity: 1;
.effect__subheading {
transform: translateY(0);
opacity: 1;
}
.effect__heading:after, .effect__heading:before {
opacity: 0.1;
transform: translate(-50%, -50%) scale(1);
}
}
}
.effect-d {
opacity: 0.5;
transition: opacity 0.3s $easing;
.effect__heading:after {
opacity: 0;
top: 50%;
left: 50%;
height: 40px;
width: 50%;
background: #000;
z-index: -1;
transform-origin: 50% 50%;
transform: translate(-50%, -50%) rotate(45deg) scaleX(0);
transition: transform 0.5s $easing;
}
.effect__subheading {
opacity: 0;
transform: translate(-10px, -10px);
transition: opacity 0.5s $easing, transform 0.5s $easing;
}
&:hover {
opacity: 1;
.effect__heading:after {
opacity: 0.1;
transform: translate(-50%, -50%) rotate(45deg) scaleX(1);
}
.effect__subheading {
transform: translate(0, 0);
opacity: 1;
}
}
}
<link href="https://fonts.googleapis.com/css?family=Hind|Yrsa" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment