CodeMyUI/index.html

## index.html
<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>

## nat-geo-highlight-effect.markdown

      
    Raw
  

              nat-geo-highlight-effect.markdown
            
          
    Nat Geo Highlight Effect

A Pen by shelaine on CodePen.
License.

  
## style.css
@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%;

}
	<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%;

	}