Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/index.html

Created Jan 16, 2020
Embed
What would you like to do?
Nat Geo Highlight Effect
<body>
<main>
<div>
<h1>Nat Geo Hover Effect</h1>
<p><a href="https://www.nationalgeographic.com" 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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/508143/catboat.gif"/>
<p>
"The enterprise started in 1966 when Henriette van Weelde, known locally as the “cat lady,” <a href="https://www.atlasobscura.com/places/de-poezenboot-the-cat-boat" target="blank">began taking in abandoned cats on an old sailing barge she had modified with a cat-friendly interior</a>."
</p>
</div>
</main>
</body>
@import url("https://fonts.googleapis.com/css?family=Merriweather:400,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
You can’t perform that action at this time.