Las imágenes tienen que estar tal y como están una encima de la otra, ya que esa es la idea principal.
Pero como se puede ver el texto lo centra correctamente, pero la imagen no.
¿Cómo puedo solucionar esto?
body{
overflow-x: hidden;
background: #f2f2f2;
}
.my-navbar{
background: rgba(0,0,0,.8);
border:none;
border-radius: 0px !important;
}
.div-image{
margin:50px auto;
float:none;
min-height: 350px;
transition: color 1s, font-size 1s;
}
.div-image:hover{
color: rgb(90,200,120);
font-size: 20px;
}
.static-image{
position: absolute;
}
.rotate-image{
position: absolute;
-webkit-transition: transform .2s;
transition: transform 1s, margin-left .6s, margin-top .6s;
}
.rotate-image:hover{
transform: rotate(15deg);
margin-left: 50px;
margin-top: 30px;
}
.center-element{
margin:0px auto !important;
float:none !important;
}
.no-margin{
margin: 0px !important;
}
.no-padding{
padding: 0px !important;
}
.white-text{
color: #FFFFFF;
}
.black-text{
color: #000000;
}
.gray-text{
color: #c9c9c9;
}
.red-text{
color: #AE2629;
}
.blue-text{
color: #18666A;
}
<article class="row" id="ip6">
<center><h1>iPhone</h1></center>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="div-image">
<center><h4>Probando cosas</h4>
<img class="static-image" src="https://store.storeimages.cdn-apple.com/4662/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone7/jetblack/iphone7-jetblack-select-2016_AV2?wid=150&hei=305&fmt=png-alpha&qlt=95&.v=1472693558353">
<img class="rotate-image" src="https://store.storeimages.cdn-apple.com/4662/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone7/jetblack/iphone7-jetblack-select-2016_AV1?wid=150&hei=305&fmt=png-alpha&qlt=95&.v=1472693193136"></center>
</div>
</div>
</article>