Huge Image

gistfile1.html

<div class="huge">
  <div class="hugebg">
    <div class="hugetext">Button.</div>
  </div>
  <img width="100%" src="images/neon.jpg">
</div>

Huge Image

.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;
}