Skip to content

Instantly share code, notes, and snippets.

@billerickson
Last active August 22, 2016 23:21
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save billerickson/51537f13aee58814617c to your computer and use it in GitHub Desktop.
Save billerickson/51537f13aee58814617c to your computer and use it in GitHub Desktop.
/* Page Link
--------------------------------------------- */
.page-link {
overflow: hidden;
width: 100%;
}
.page-link a {
display: block;
float: left;
width: 235px;
height: 150px;
background-size: cover;
background-position: center center;
position: relative;
margin-left: 20px;
}
.page-link a:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
background: rgba( 0, 0, 0, .2 );
z-index: 1;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.page-link a:hover:before {
background: rgba( 0, 0, 0, .4 );
}
.page-link a:first-child {
margin-left: 0;
}
.page-link a span {
color: #fff;
display: block;
font-size: 32px;
font-weight: 700;
text-shadow: 0 2px 4px rgba( 0, 0, 0, .5 );
position: absolute;
top: 50%;
left: 50%;
width: 235px;
text-align: center;
text-decoration: none;
-webkit-transform: translate( -50%, -50%);
-moz-transform: translate( -50%, -50%);
-ms-transform: translate( -50%, -50%);
-o-transform: translate( -50%, -50%);
transform: translate( -50%, -50%);
z-index: 5;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment