<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container dad"> <div class="son-1"> </div> <p class="son-text"><span class="son-span">April 4</span><br/><br/>Authentic places that I've visited</p> </div>

@import url(https://fonts.googleapis.com/css?family=Josefin+Slab:400,100,300,600,100italic,300italic,400italic,600italic,700,700italic); .dad { height: 400px; width: 100%; overflow: hidden; position: relative; padding: 0; } .dad > .son-1 { position: absolute; height: 100%; width: 100%; -moz-transition: all 5s; -webkit-transition: all 5s; transition: all 5s; -moz-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); background-image: url("https://bufiles.blob.core.windows.net/co3634/zooming_effect/zooming_bg_1.jpg"); -moz-background-size: cover; -webkit-background-size: cover; background-size: cover; z-index: -1; } .dad:hover > .son-1 { -moz-transform: scale(2,2); -webkit-transform: scale(2,2); transform: scale(2,2); } .son-text { color: #fcfcfc; font-size: 2em; font-family: 'Josefin Slab', serif; text-align: center; width: 100%; height: 400px; -moz-transition: all 1s; -webkit-transition: all 1s; transition: all 1s; padding-top: 15vh; } .son-text:hover { background-color: #22313F; opacity: 0.7; } .son-span { background: #fcfcfc; color: #22313F; padding: 15px 45px; font-family: 'Josefin Slab', serif; font-style: italic; }