CSS Zoom with Background Image

http://stackoverflow.com/questions/15757036/creating-a-zoom-effect-on-an-image-on-hover-using-css/25071407#25071407

by jme11

HTML

<div id="menu">
    <div class="blog zoomimg"></div>
    <div class="music zoomimg"></div>
    <div class="projects zoomimg"></div>
    <div class="bio zoomimg"></div>
</div>

CSS

#menu {
    max-width: 1200px;
    text-align: center;
    margin: auto;
}
.zoomimg {
    display: inline-block;
    width: 250px;
    height: 375px;
    padding: 0px 5px 0px 5px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    transition: all .5s ease;
    position: relative;
}
.zoomimg:hover {
    cursor: pointer;
    background-size: 150% 150%;
}
.blog {
    background-image: url(http://s18.postimg.org/il7hbk7i1/image.png);
}
.music {
    background-image: url(http://s18.postimg.org/4st2fxgqh/image.png);
}
.projects {
    background-image: url(http://s18.postimg.org/sxtrxn115/image.png);
}
.bio {
    background-image: url(http://s18.postimg.org/5xn4lb37d/image.png);
}

/*CSS to Add an Overlay*/

.zoomimg:after {
    position: absolute;
    background-color: rgba(0,0,0,.35);
    content: 'Click Here';
    font-family: sans-serif;
    padding-top: 250px;
    font-size: 2em;
    color: #fff;
    top:  0;
    left: 0;
    width: 260px;
    height: 375px;
    opacity: 0;
    transition: opacity .5s linear;
    box-sizing: border-box;
}
.zoomimg:hover:after {
    opacity: 1;
}