transform

by luissanchezm86

HTML

<div class="triggerElement">
    Hover me.
<div class="posDiv">
    This is absolutely positioned
</div>
</div>

<div class="triggerElement">
    Hover me too.
<div class="posDiv lower">
    This is absolutely positioned
</div>
</div>

CSS

.triggerElement
{
    border:1px solid blue;
    height:100px;
    width:100px;
}

.posDiv
{
    position:absolute;
    top:0;
    left:0;
    margin:0;
    border:1px solid red;
    
    -moz-transition:all 2s;
    -webkit-transition:all 2s;
    -o-transition:all 2s;
    transition:all 2s;
}

.triggerElement:hover .posDiv
{
    top:50%;
    left:50%;
    margin-left:-50px;
    margin-top:-50px;
    
    -moz-transition:all 2s;
    -webkit-transition:all 2s;
    -o-transition:all 2s;
    transition:all 2s;
}

.lower
{
    top:100px;
    left:200px;
}