Link Highlight Hover/Click Effect

index.html

<div class="wrapper">
  <div class="text-container">
<a class="text">nihil sub sole novum</a>
  </div>
</div>

link-highlight-hover-click-effect.markdown

Link Highlight Hover/Click Effect

CSS background transition to add a highlight effect on hover / click of a link.

Background from: https://getstream.io/

A Pen by Emily Hayman on CodePen.

License.

style.scss

.text {
    transition: background-size .4s ease;
  background: linear-gradient(to bottom, transparent 62%, #fff87e 0) center center/0% 75% no-repeat;
  font-family: Quicksand;
  font-size: 3rem;
  padding: 0 6px 2px 6px;
  cursor: pointer;
      color: rgba(80, 89, 113, 0.7);
    letter-spacing: .08rem;
  &:hover {
    background-size: 100% 100%;
  }
  &:active {
    background-size: 80% 100%;
  }
  &-container {
    z-index: 1;
    position: relative;
    background-color: #fff;
    padding: 60px;
    box-shadow: 0 0 90px 10px rgba(95, 124, 179, 0.15);
  }
}

.wrapper {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMTQyNXB4IiBoZWlnaHQ9Ijg3MXB4IiB2aWV3Qm94PSIwIDAgMTQyNSA4NzEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+cGFydGljbGVzPC90aXRsZT4gICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+ICAgIDxkZWZzPjwvZGVmcz4gICAgPGcgaWQ9Ii1Ib21lIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxnIGlkPSIwMS4tV2ViLUhvbWUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC01LjAwMDAwMCwgLTE5OS4wMDAwMDApIj4gICAgICAgICAgICA8ZyBpZD0icGFydGljbGVzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3MTcuNTAwMDAwLCA2MzQuNTAwMDAwKSByb3RhdGUoLTE4MC4wMDAwMDApIHRyYW5zbGF0ZSgtNzE3LjUwMDAwMCwgLTYzNC41MDAwMDApIHRyYW5zbGF0ZSg1LjAwMDAwMCwgMTk5LjAwMDAwMCkiPiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTI0LjU0ODM4Nyw0MjcuNTQwMjMgTDE1Ny40NTE2MTMsNTIwLjQ1OTc3IiBpZD0iTGluZSIgc3Ryb2tlPSIjRUNGMUZGIj48L3BhdGg+ICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJQYXRoLTEiIHN0cm9rZT0iI0VDRjFGRiIgcG9pbnRzPSIyMTAgMjAgMjI3LjM0NCA3OC40NjUxMTYzIDI0Ny45NCAxNTcuNTAxMjkyIDIyNS4xNzYgMjUwLjYxMjQwMyAyODYuOTY0IDM2Ny41NDI2MzYgMzI0LjkwNCA0MTkuNTExNjI4IDM2Ny4xOCA0MzkgMzI4LjE1NiAzNDYuOTcxNTc2IDMxMS44OTYgMjc0LjQzMTUyNSA0ODEgMzEwLjE2MDIwNyAzMzMuNTc2IDE4My40ODU3ODggMzk2LjQ0OCAxODIuNDAzMTAxIDM1NC4xNzIgMTQzLjQyNjM1NyAyNzkuMzc2IDEyMC42ODk5MjIgMjQ1Ljc3MiA3My4wNTE2Nzk2Ij48L3BvbHlnb24+ICAgICAgICAgICAgICAgIDxwb2x5bGluZSBpZD0iUGF0aC0yIiBzdHJva2U9IiNFQ0YxRkYiIHBvaW50cz0iMzY2IDQzOCAyMjcuMTY5MjMxIDIzNC4zMzMzMzMgMjgzLjU2OTIzMSAyNzYuNTgzMzMzIDI4Ny45MDc2OTIgMzY3LjU4MzMzMyAzMjguMDM4NDYyIDM1MC4yNSAyMjUgMjUwLjU4MzMzMyAzMzEuMjkyMzA4IDE4Ni42NjY2NjcgMzU1LjE1Mzg0NiAxNDEuMTY2NjY3IDI4My41NjkyMzEgMTU2LjMzMzMzMyAyNzcuMDYxNTM4IDEyMC41ODMzMzMgMjQ5Ljk0NjE1NCAxNTcuNDE2NjY3IDI0Ni42OTIzMDggNzQgMjI5LjMzODQ2MiA4MS41ODMzMzMzIDMyNC43ODQ2MTUgNDIwLjY2NjY2NyI+PC9wb2x5bGluZT4gICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9IlBhdGgtMyIgc3Ryb2tlPSIjRUNGMUZGIiBwb2ludHM9IjIwOSAxOCAyODUuNjA1MjYzIDE1NS4yOTcyOTcgMzMyIDE4My40MDU0MDUgMzEyLjU3ODk0NyAyNjkuODkxODkyIDI5NS4zMTU3ODkgMzM4IDIzMC41Nzg5NDcgMjM3LjQ1OTQ1OSAyODMuNDQ3MzY4IDEyOS4zNTEzNTEgMjMyLjczNjg0MiA3Ny40NTk0NTk1Ij48L3BvbHlnb24+ICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMSIgZmlsbD0iI0VDRjFGRiIgY3g9IjIyNyIgY3k9IjgwIiByPSI0Ij48L2NpcmNsZT4gICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC0xIiBmaWxsPSIjRUNGMUZGIiBjeD0iMjQ2IiBjeT0iNzUiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSIyNDYiIGN5PSIxNTYiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSIyODMiIGN5PSIxNTYiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSIyNzkiIGN5PSIxMzAiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSIyNzYiIGN5PSIxMjAiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSIzNTMiIGN5PSIxNDMiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSIzOTQiIGN5PSIxODIiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSIzMzIiIGN5PSIxODQiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSIyMjgiIGN5PSIyMzUiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSIyMjQiIGN5PSIyNDkiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSIzMTAiIGN5PSIyNzQiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSI0ODAiIGN5PSIzMDkiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSIzMjgiIGN5PSIzNDciIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSIyOTQiIGN5PSIzNDEiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSIyODgiIGN5PSIzNjkiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSIzMjQiIGN5PSI0MTkiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSIzNjYiIGN5PSI0MzYiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSIxNjciIGN5PSIzNjAiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSI0NiIgY3k9Ijg4IiByPSI0Ij48L2NpcmNsZT4gICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC0xIiBmaWxsPSIjRUNGMUZGIiBjeD0iMzc1IiBjeT0iMzIiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSIyMDgiIGN5PSIxOSIgcj0iNCI+PC9jaXJjbGU+ICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMSIgZmlsbD0iI0VDRjFGRiIgY3g9IjMyNyIgY3k9IjY0OSIgcj0iNCI+PC9jaXJjbGU+ICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMSIgZmlsbD0iI0VDRjFGRiIgY3g9Ijg2IiBjeT0iNTc1IiByPSI0Ij48L2NpcmNsZT4gICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC0xIiBmaWxsPSIjRUNGMUZGIiBjeD0iMjEiIGN5PSI2MDQiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSIxNTMiIGN5PSI2NTMiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSIxNTciIGN5PSI3MDMiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSIxMDAiIGN5PSI3NTQiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSI0IiBjeT0iNzk1IiByPSI0Ij48L2NpcmNsZT4gICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC0xIiBmaWxsPSIjRUNGMUZGIiBjeD0iODEiIGN5PSI4NjciIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSIzNTIiIGN5PSI4MDEiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSI3NzEiIGN5PSI3NTQiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSI4OTgiIGN5PSI2MzEiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0xIiBmaWxsPSIjRUNGMUZGIiBjeD0iMTEzNyIgY3k9IjU5MCIgcng9IjQiIHJ5PSI0Ij48L2VsbGlwc2U+ICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMSIgZmlsbD0iI0VDRjFGRiIgY3g9IjEwMDMiIGN5PSI0NjEiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSI4NDIiIGN5PSI1NTYiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSI3OTkiIGN5PSI1NTQiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSI3MTMiIGN5PSI1MjUiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSI3MjIiIGN5PSI0MTgiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSI2MTYiIGN5PSI1MjQiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSI2NjkiIGN5PSI1NzYiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSI0ODciIGN5PSI1MTYiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSIzODkiIGN5PSI1NDciIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSI1MDQiIGN5PSI2NDgiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSI0OTYiIGN5PSI2MjYiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSI2MDkiIGN5PSI3MTIiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSIxNTkiIGN5PSI1MjMiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSIxMjQiIGN5PSI0MjUiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSI2NTIiIGN5PSI0NDIiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0xIiBmaWxsPSIjRUNGMUZGIiBjeD0iMTI0OCIgY3k9IjQyMyIgcng9IjQiIHJ5PSI0Ij48L2VsbGlwc2U+ICAgICAgICAgICAgICAgIDxlbGxpcHNlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSIxMjQ4IiBjeT0iNTQ0IiByeD0iNCIgcnk9IjQiPjwvZWxsaXBzZT4gICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtMSIgZmlsbD0iI0VDRjFGRiIgY3g9IjExODkiIGN5PSI3OTUiIHJ4PSI0IiByeT0iNCI+PC9lbGxpcHNlPiAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0xIiBmaWxsPSIjRUNGMUZGIiBjeD0iMTE5OSIgY3k9IjgwNyIgcng9IjQiIHJ5PSI0Ij48L2VsbGlwc2U+ICAgICAgICAgICAgICAgIDxlbGxpcHNlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSIxMjI0IiBjeT0iNzc0IiByeD0iNCIgcnk9IjQiPjwvZWxsaXBzZT4gICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtMSIgZmlsbD0iI0VDRjFGRiIgY3g9IjEyOTIiIGN5PSI3MzEiIHJ4PSI0IiByeT0iNCI+PC9lbGxpcHNlPiAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0xIiBmaWxsPSIjRUNGMUZGIiBjeD0iMTMzMCIgY3k9IjYxMyIgcng9IjQiIHJ5PSI0Ij48L2VsbGlwc2U+ICAgICAgICAgICAgICAgIDxlbGxpcHNlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSIxMzU4IiBjeT0iNjgzIiByeD0iNCIgcnk9IjQiPjwvZWxsaXBzZT4gICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtMSIgZmlsbD0iI0VDRjFGRiIgY3g9IjEyMDAiIGN5PSI2ODUiIHJ4PSI0IiByeT0iNCI+PC9lbGxpcHNlPiAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0xIiBmaWxsPSIjRUNGMUZGIiBjeD0iMTIwNCIgY3k9Ijc5NSIgcng9IjQiIHJ5PSI0Ij48L2VsbGlwc2U+ICAgICAgICAgICAgICAgIDxlbGxpcHNlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSIxNDIxIiBjeT0iMzQ3IiByeD0iNCIgcnk9IjQiPjwvZWxsaXBzZT4gICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC0xIiBmaWxsPSIjRUNGMUZGIiBjeD0iNzA2IiBjeT0iMTQ3IiByPSI0Ij48L2NpcmNsZT4gICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC0xIiBmaWxsPSIjRUNGMUZGIiBjeD0iODM2IiBjeT0iMjgyIiByPSI0Ij48L2NpcmNsZT4gICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC0xIiBmaWxsPSIjRUNGMUZGIiBjeD0iODU5IiBjeT0iMzEzIiByPSI0Ij48L2NpcmNsZT4gICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC0xIiBmaWxsPSIjRUNGMUZGIiBjeD0iOTIwIiBjeT0iMjY1IiByPSI0Ij48L2NpcmNsZT4gICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC0xIiBmaWxsPSIjRUNGMUZGIiBjeD0iOTA5IiBjeT0iMTg1IiByPSI0Ij48L2NpcmNsZT4gICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC0xIiBmaWxsPSIjRUNGMUZGIiBjeD0iOTMzIiBjeT0iMTQ0IiByPSI0Ij48L2NpcmNsZT4gICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC0xIiBmaWxsPSIjRUNGMUZGIiBjeD0iOTcxIiBjeT0iMTY5IiByPSI0Ij48L2NpcmNsZT4gICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC0xIiBmaWxsPSIjRUNGMUZGIiBjeD0iOTkwIiBjeT0iMjE2IiByPSI0Ij48L2NpcmNsZT4gICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC0xIiBmaWxsPSIjRUNGMUZGIiBjeD0iMTAyNCIgY3k9IjI1MSIgcj0iNCI+PC9jaXJjbGU+ICAgICAgICAgICAgICAgIDxlbGxpcHNlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSIxMTE0IiBjeT0iMjkzIiByeD0iNCIgcnk9IjQiPjwvZWxsaXBzZT4gICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtMSIgZmlsbD0iI0VDRjFGRiIgY3g9IjExOTciIGN5PSIzMzAiIHJ4PSI0IiByeT0iNCI+PC9lbGxpcHNlPiAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0xIiBmaWxsPSIjRUNGMUZGIiBjeD0iMTI1NiIgY3k9IjI4NCIgcng9IjQiIHJ5PSI0Ij48L2VsbGlwc2U+ICAgICAgICAgICAgICAgIDxlbGxpcHNlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSIxMzU3IiBjeT0iMzQzIiByeD0iNCIgcnk9IjQiPjwvZWxsaXBzZT4gICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtMSIgZmlsbD0iI0VDRjFGRiIgY3g9IjEzNzQiIGN5PSIyNTkiIHJ4PSI0IiByeT0iNCI+PC9lbGxpcHNlPiAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0xIiBmaWxsPSIjRUNGMUZGIiBjeD0iMTMyMyIgY3k9IjE2NCIgcng9IjQiIHJ5PSI0Ij48L2VsbGlwc2U+ICAgICAgICAgICAgICAgIDxlbGxpcHNlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSIxMjc4IiBjeT0iMTg2IiByeD0iNCIgcnk9IjQiPjwvZWxsaXBzZT4gICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtMSIgZmlsbD0iI0VDRjFGRiIgY3g9IjEzODciIGN5PSIxMjgiIHJ4PSI0IiByeT0iNCI+PC9lbGxpcHNlPiAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0xIiBmaWxsPSIjRUNGMUZGIiBjeD0iMTI2MyIgY3k9IjQ3IiByeD0iNCIgcnk9IjQiPjwvZWxsaXBzZT4gICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtMSIgZmlsbD0iI0VDRjFGRiIgY3g9IjEwOTQiIGN5PSI0NyIgcng9IjQiIHJ5PSI0Ij48L2VsbGlwc2U+ICAgICAgICAgICAgICAgIDxlbGxpcHNlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSIxMDY2IiBjeT0iMzciIHJ4PSI0IiByeT0iNCI+PC9lbGxpcHNlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSIxMDMwIiBjeT0iMzMiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSI5NTYiIGN5PSI0NiIgcj0iNCI+PC9jaXJjbGU+ICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMSIgZmlsbD0iI0VDRjFGRiIgY3g9Ijk0OSIgY3k9IjY4IiByPSI0Ij48L2NpcmNsZT4gICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC0xIiBmaWxsPSIjRUNGMUZGIiBjeD0iNjc4IiBjeT0iODMiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSI3MzQiIGN5PSI0IiByPSI0Ij48L2NpcmNsZT4gICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC0xIiBmaWxsPSIjRUNGMUZGIiBjeD0iNzk1IiBjeT0iOTAiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSI1MTciIGN5PSIyMDUiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSI1MDAiIGN5PSIxMjAiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIGZpbGw9IiNFQ0YxRkYiIGN4PSI2MTQiIGN5PSIxOTEiIHI9IjQiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8cG9seWxpbmUgaWQ9IlBhdGgtNSIgc3Ryb2tlPSIjRUNGMUZGIiBwb2ludHM9IjQ5MC44MzMzMzMgNTE1IDM4OSA1NDkuNjIyOTUxIDUwNiA2NDkuMTYzOTM0IDQ5Ni4yNSA2MjcuNTI0NTkgNjEwIDcxMyI+PC9wb2x5bGluZT4gICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9IlBhdGgtNiIgc3Ryb2tlPSIjRUNGMUZGIiBwb2ludHM9IjgyLjE2OTAxNDEgODY3IDk4LjQzNjYxOTcgNzU1LjE5MzMwOSAxNTcgNzA2LjM0NTcyNSAxNTIuNjYxOTcyIDY1NC4yNDE2MzYgODcuNTkxNTQ5MyA1NzUgMTkuMjY3NjA1NiA2MDUuMzk0MDUyIDE1Mi42NjE5NzIgNjU0LjI0MTYzNiA5OC40MzY2MTk3IDc1NS4xOTMzMDkgMyA3OTUuMzU2ODc3Ij48L3BvbHlnb24+ICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJQYXRoLTciIHN0cm9rZT0iI0VDRjFGRiIgcG9pbnRzPSI4OTggNjMxIDg0MS42IDU1Ni4wMTUzMDYgODAwLjM4NDYxNSA1NTMuODQxODM3IDcxMi41MzA3NjkgNTI0LjUgNjY4LjA2MTUzOCA1NzYuNjYzMjY1IDYxNiA1MjQuNSA3NjMuNTA3NjkyIDUwOC4xOTg5OCA3MjIuMjkyMzA4IDQxOCA3MTIuNTMwNzY5IDUyNC41Ij48L3BvbHlnb24+ICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xMDAzLDQ2MSBMMTEzOSw1OTAiIGlkPSJQYXRoLTgiIHN0cm9rZT0iI0VDRjFGRiI+PC9wYXRoPiAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iUGF0aC05IiBzdHJva2U9IiNFQ0YxRkYiIHBvaW50cz0iNTAwIDEyMSA1MTUuMTc3NTcgMjA2IDYxNiAxOTAuOTM2NzA5Ij48L3BvbHlnb24+ICAgICAgICAgICAgICAgIDxwb2x5bGluZSBpZD0iUGF0aC0xMCIgc3Ryb2tlPSIjRUNGMUZGIiBwb2ludHM9IjY3NyA4My41NTU1NTU2IDczNC4zNzYxNDcgMyA3OTUgOTAiPjwvcG9seWxpbmU+ICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik04NjIuMDk5NjA5LDMxNC43NDE4MTggTDgzNSwyODIuMjMyNzI3IEw5MjAuNjM0NzY2LDI2Ny4wNjE4MTggTDg1NS41OTU3MDMsMzE0Ljc0MTgxOCBMOTIwLjYzNDc2NiwyNjcuMDYxODE4IEw5MDcuNjI2OTUzLDE4Mi41MzgxODIgTDkzMS40NzQ2MDksMTQyLjQ0MzYzNiBDOTMxLjQ3NDYwOSwxNDIuNDQzNjM2IDkzNC40NjM0MTEsMTQ0LjU0MzIwMSA5MzUuOTU3ODEyLDE0NS41OTI5ODQgQzk0Ny44MzI1NTIsMTUzLjkzNDcxNiA5NzEuNTgyMDMxLDE3MC42MTgxODIgOTcxLjU4MjAzMSwxNzAuNjE4MTgyIEw5MDcuNjI2OTUzLDE4Ni44NzI3MjcgTDkzNS45NTc4MTMsMTQ1LjU5Mjk4OCBMOTkwLjAwOTc2NiwyMTUuMDQ3MjczIEwxMDMxLjIwMTE3LDMyMS4yNDM2MzYgTDExMTIuNSwyOTEuOTg1NDU1IEwxMTYzLjQ0NzI3LDIwNi4zNzgxODIgTDk5MC4wMDk3NjYsMjE1LjA0NzI3MyBMMTAyMy42MTMyOCwyNTAuODA3MjczIEwxMTk1Ljk2NjgsMzMwLjk5NjM2NCBMMTI1Ni42Njk5MiwyODMuMzE2MzY0IEwxMzU4LjU2NDQ1LDM0NCBMMTM3My43NDAyMywyNTguMzkyNzI3IEwxMjYxLjAwNTg2LDQ2IEwxMzkwLDEyOS40NCBMMTI3Ni4xODE2NCwxODYuODcyNzI3IiBpZD0iUGF0aC0xMSIgc3Ryb2tlPSIjRUNGMUZGIj48L3BhdGg+ICAgICAgICAgICAgICAgIDxwb2x5bGluZSBpZD0iUGF0aC0xMiIgc3Ryb2tlPSIjRUNGMUZGIiBwb2ludHM9IjEwOTMuMTY2NjcgNDguMzYzNjM2NCAxMTA0IDggMTA2Ni4wODMzMyAzNS4yNzI3MjczIDEwMzAuMzMzMzMgMzIgOTU2LjY2NjY2NyA0Ni4xODE4MTgyIDk0OCA2OCAxMDMwLjMzMzMzIDMyIj48L3BvbHlsaW5lPiAgICAgICAgICAgICAgICA8cG9seWxpbmUgaWQ9IlBhdGgtMTMiIHN0cm9rZT0iI0VDRjFGRiIgcG9pbnRzPSIxMzMxLjg5MTg5IDYxNiAxMzYwIDY4Mi4xNDQ1NzggMTI4Ny41Njc1NyA3MjcuNjg2NzQ3IDEyMDMuMjQzMjQgNzk2IDEyMDAgNjg1LjM5NzU5IDEzNjAgNjg1LjM5NzU5Ij48L3BvbHlsaW5lPiAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iUGF0aC0xNCIgc3Ryb2tlPSIjRUNGMUZGIiBwb2ludHM9IjEyOTQgNzMwLjM1NDU0NSAxMjAwLjgzMzMzIDY4NiAxMjI1Ljc1IDc3NC43MDkwOTEgMTE5OS43NSA4MDUgMTE5MCA3OTUuMjYzNjM2Ij48L3BvbHlnb24+ICAgICAgICAgICAgPC9nPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+);
  &:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    background-color: rgba(78, 171, 239, 0.13);
    z-index: 0;
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=Quicksand:700" rel="stylesheet" />