Skip to content

Instantly share code, notes, and snippets.

Created January 16, 2020 23:06
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Nat Geo Highlight Effect
<h1>Nat Geo Hover Effect</h1>
<p><a href="" target="blank">National Geographic</a> has this simple & stylish hover state that I wanted to disect. It works well for editorial content because it resembles highlighted text.</p>
<img src=""/>
"The enterprise started in 1966 when Henriette van Weelde, known locally as the “cat lady,” <a href="" target="blank">began taking in abandoned cats on an old sailing barge she had modified with a cat-friendly interior</a>."
@import url(",400i,700");
body {
font-family: Merriweather, serif;
font-size: 18px;
main {
width: 70vw;
height: 100%;
margin: 20px auto;
display: flex;
justify-content: center;
div {
display: flex;
margin: auto;
flex-direction: column;
img {
width: 80%;
height: auto;
h1 {
margin-bottom: 5px;
a, a:link {
color: black;
text-decoration: none;
background-position-y: -0%;
background-image: linear-gradient( white 50%, gold 50%);
transition: background 500ms ease;
background-size: 2px;
background-size: auto 175%;
a:hover {
background-position-y: 100%;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment