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