<center> в Изображении оно не функционирует правильно

Изображения должны быть, как они одна на другой, так как это главная идея.

Но поскольку возможно видеть текст, он это ориентирует правильно, но изображение - нет.

Как я могу решать это?

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>
6
задан 01.03.2017, 14:29
0 ответов