Skip to content

Instantly share code, notes, and snippets.

@thotbox
Last active March 17, 2016 19:18
Show Gist options
  • Select an option

  • Save thotbox/3a1909a3d315321e2f2a to your computer and use it in GitHub Desktop.

Select an option

Save thotbox/3a1909a3d315321e2f2a to your computer and use it in GitHub Desktop.
block hover stuff
.demo-block {
position: relative;
overflow: hidden;
}
.demo-block img {
transform: scale(1.02);
transition: transform .2s;
}
.demo-block:hover img {
transform: scale(1.3);
}
.demo-block-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.1);
transition: all .2s;
}
.demo-block:hover .demo-block-overlay {
background: rgba(0,0,0,0.5);
}
.demo-block-text {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 30px;
text-align: center;
opacity: 0;
transition: all .2s;
}
.demo-block:hover .demo-block-text {
opacity: 1;
}
.demo-block-text h3 {
color: #ffffff;
font-size: 50px;
}
.demo-block-text h3 .fa {
color: #cccccc;
margin-right: 15px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment