Gradually increase a background-image from a point

Question

I need the effect below in css3 or javascript. Go to GIF

What I already have is only the basic: The image does not make the desired effect, because it started from its own center. I need it to be from your lower right, as per GIF above.

// when DOM is ready
$(document).ready(function() {

  //console.log("DOM ready");

  mapItems = $("div.map").find("div img.mapItem");

  var tempItem;

  for (var i = 0; i < mapItems.length; i++) {

    tempItem = mapItems[i];

    $(tempItem).click(function($e) {

      $e.preventDefault();
      var desc = $("#" + $(this).attr('id') + "-desc").attr("data-desc");
      $("#" + $(this).attr('id') + "-desc").html('<p>' + desc + '</p>');

      $("#" + $(this).attr('id') + "-desc").toggleClass("modal-celebration");
      $(this).toggleClass("down");

    });



  };

});

.rotate {
  -moz-transition: all 2s linear;
  -webkit-transition: all 2s linear;
  transition: all 0.5s linear;
}
.rotate.down {
  -moz-transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
}
@-webkit-keyframes overlayfx {
  0% {
    -webkit-transform: scale(.8);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1.1);
    opacity: 1;
    z-index: 1;
  }
}
@-moz-keyframes overlayfx {
  0% {
    -moz-transform: scale(.8);
    opacity: 0;
  }
  100% {
    -moz-transform: scale(1.1);
    opacity: 1;
    z-index: 1;
  }
}
@keyframes overlayfx {
  0% {
    transform: scale(.8);
    opacity: 0;
  }
  100% {
    transform: scale(1.1);
    opacity: 1;
    z-index: 1;
  }
}
.modal-celebration {
  display: block!important;
  width: 158px;
  height: 158px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
  -webkit-transform: scale(.8);
  -webkit-animation: overlayfx 0.3s linear 0.1s 1 forwards;
  -moz-transform: scale(.8);
  -moz-animation: overlayfx 0.3s linear 0.1s 1 forwards;
  transform: scale(.8);
  animation: overlayfx 0.3s linear 0.1s 1 forwards;
}
p {
  position: relative;
  top: 47px;
  left: 9px;
  text-align: center;
  width: 138px;
  font-size: 18px;
}
/*** ITEM ***/

#local {
  left: 311px;
  top: 384px;
}
#local-desc {
  display: none;
  left: 311px;
  top: 20px;
  z-index: -999999;
  text-align: center;
  background-repeat: no-repeat;
  background-image: url(http://rdeveloper.com.br/imagens//lake-club.png);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="main">

  <div id="map" class="map">


    <!-- DESCRIÇÕES -->
    <div class="mapDesc" data-desc="Lake Club de alto nível." id="local-desc" style="display: none;"></div>



    <!-- LOJAS -->
    <div id="z-in">
      <a href="#">
        <img src="http://rdeveloper.com.br/imagens/AMAIS-_0021_NEW-PIN.png" class="mapItem itemDefault rotate" id="local" />
      </a>
    </div>




  </div>

Answer 1

Use the property transition for the progressive animation and bottom to position in the lower left corner:

$('button').click(function() {
  $('p').css({
    "width": "158px",
    "height": "158px"
  });
});

div {
  position: relative;
  display: block;
  width: 158px;
  height: 158px;
  border: 1px solid black;
}
p {
  display: block;
  position: absolute;
  bottom: 0;
  margin: 0;
  width: 79px;
  height: 79px;
  background-image: url("http://rdeveloper.com.br/imagens/lake-club.png");
  background-size: contain;
  -webkit-transition: width 600ms ease-in-out, height 600ms ease-in-out;
  -moz-transition: width 600ms ease-in-out, height 600ms ease-in-out;
  -o-transition: width 600ms ease-in-out, height 600ms ease-in-out;
  transition: width 600ms ease-in-out, height 600ms ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p></p>
</div>
<button>Aumentar</button>