JSFiddle - React, Tailwind, and code Playground

http://stackoverflow.com/questions/28034054/animating-scale-using-css-with-multiple-backgrounds/28034496

HTML

<section id="about-photo" class = "light-bg img-bg"> 

    <div class="smiley"></div><!-- /.container -->

</section>

CSS

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  }

#about-photo {
    position: relative;
}

.light-bg {
    width: 100px;
    height: 100px;
    background: url('http://www.broomehovercraft.com.au/graphics/bht/popups/gallery-sunset-6.jpg');
    background-repeat: no-repeat;
}

.smiley {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    z-index: 2;
    background: url('http://www.wpclipart.com/smiley/assorted_smiley/assorted_3/smiley_a_bit_angry_T.png');
    background-size: 100px 100px;
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
}

.smiley:hover {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -o-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
}