Skip to content

Instantly share code, notes, and snippets.

@euccas
Last active June 8, 2020 02:09
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save euccas/2d146d5a294fec51b5e1 to your computer and use it in GitHub Desktop.
Save euccas/2d146d5a294fec51b5e1 to your computer and use it in GitHub Desktop.
Add an overlay effect on a link (image).Example: http://carmentang.co/
<a class="post-overlay" href="http://carmentang.co/callahan-realty-group/" rel="bookmark" title="Callahan Realty Group">
<p class="view">View →</p>
</a>
.posts .post .post-overlay, .post-navigation a, .post-navigation a p {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.post-overlay {
display: block;
background: rgba(17,17,17,0.3);
opacity: 0;
position: absolute;
z-index: 1000;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment