JSFiddle - React, Tailwind, and code Playground

HTML

<div class='div-com-bg'>
    Ola?
</div>

CSS

.div-com-bg{
  display: flex;
  align-items: center;
  justify-content: center;
  
  width: 200px;
  height: 200px;
  background-image: url(http://lorempixel.com/g/200/200/);
  background-size: 100%;
  background-position:center center;

  transition: background-size 2s ease-in;
  -moz-transition: background-size 2s ease-in;
  -ms-transition: background-size 2s ease-in;
  -o-transition: background-size 2s ease-in;
  -webkit-transition: background-size 2s ease-in;

}

.div-com-bg:hover,
.div-com-bg.ativado{
background-size: 140%
}