JSFiddle - React, Tailwind, and code Playground

by Glynne Turner

HTML

<div style="width:100vw; height:100vh; position: absolute; overflow:hidden">

<div id="BGzoom" class="parrallax"></div>

</div>

CSS

*{padding:0; margin:0;}
.parrallax {
 
    bottom: 0px;
    height:100%;
    width:100%;
    left: 0px;
   
    right: 0px;
    top: 0px;
    z-index: 1;
    background: rgba(0, 0, 0, 0) url(https://canarytrailevents.com/wp-content/uploads/2019/02/2019_0120_19260000-1568x1176.jpg);
     
    background-size:cover;
}
/*#DIV_1*/
 .zoomable {
    -webkit-transition:all 3s ease-out;
    transition:all 3s ease-out;
}
.zoomer {
    -webkit-transform:scale(1.5);
    transform:scale(1.5);
}