JSFiddle - React, Tailwind, and code Playground

by Ajey

HTML

<div id='wrapper'>
    <div id='image'></div>
    <div id="logo">
    
    </div>
</div>

CSS

#wrapper {
    width: 400px;
    height: 267px;
    border: 1px solid black;
    overflow:hidden;
    position:relative;
}
#image {
    background-image: url('http://s22.postimg.org/8o1jfejf5/Artboard_48.png');
    background-size: 400px 267px;
    background-position:center;
    transition: all 1.2s ease-in-out;
    width:100%;
    height:100%;
    transform: scale(1);
    position:relative;
    left:0;
    top:0;
}
#wrapper:hover #image {
    transform: scale(4);
    -webkit-transform: scale(4);
    left: 500px;
    top: 100px;
    
}

#wrapper:hover #logo {
  transform: scale(1);
  transition: all 1.2s ease-in-out;
  transform: translate(60px,10px);
      
}

#logo {
  background-image: url('http://s21.postimg.org/fh3yqpr9f/logo_bluejeans_copy_2.png');
  width: 154px;
  height: 35px;
  position: absolute;
  
    top: 30px;
    left: -32px;
  z-index: 33;
  
  transform: scale(0.3);
  
}