I need the effect below in css3 or javascript. Go to GIF
WhatIalreadyhaveisjustthebasics:Theimagedoesnothavethedesiredeffectbecauseitstartedfromitsowncenter.Ineedittobefromyourbottomright,asperthe 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><divclass="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>