Created
August 27, 2018 05:03
-
-
Save CodeMyUI/c908e401f22ae05424d2d4199d107cb9 to your computer and use it in GitHub Desktop.
Quote hovering
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$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; | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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