Skip to content

Instantly share code, notes, and snippets.

@holasnic
Created January 20, 2015 01:53
Show Gist options
  • Save holasnic/5641b6f8481076e11d92 to your computer and use it in GitHub Desktop.
Save holasnic/5641b6f8481076e11d92 to your computer and use it in GitHub Desktop.
Huge Image
<div class="huge">
<div class="hugebg">
<div class="hugetext">Button.</div>
</div>
<img width="100%" src="images/neon.jpg">
</div>
.huge {
overflow: hidden;
position: relative;
display: inline-block;
}
.hugebg {
opacity: 0;
position: absolute;
display: inline-block;
left: 0;
right: 0;
z-index: 1;
height: 400px;
width: 100%;
margin: auto;
border-radius: none;
background: rgba(236,0,140,.7);
}
.huge img{
width: 100%;
-webkit-transform: scale(1.00);
transform: scale(1.00);
transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
}
.hugetext {
font-size: 65px;
font-weight: bold;
text-align: center;
letter-spacing: -3.25px;
opacity: 0;
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
color: #fff;
z-index: 100;
transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
}
.huge:hover img {
-webkit-transform: scale(1.07);
transform: scale(1.07);
cursor: pointer;
}
.huge:hover .hugebg {
opacity: 1;
}
.huge:hover .hugetext{
opacity: 1;
font-size: 55px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment