Перемещение ровно на 20 пикселей правее

[xTODx]

Добрый день, в общем вот макет

<style type="text/css">.port{	 height:200px;	 width:80%;	 margin: 0 auto;}.port .one{ 		width:20px;		height:300px;		opacity:0.8;		transition:1s;		}.port img{	-webkit-transform: perspective(1000px) rotateY(40deg);	transform: perspective(1000px) rotateY(40deg);	width:200px;	height:300px;	}.port .one:nth-child(1n){ 		float:left;		margin: 10px;		position: relative;		left:0px;		z-index:4;	}.port .one:nth-child(2n){ 		float:left;		margin: 10px;		position: relative;		left:-20px;		z-index:3;	}.port .one:nth-child(3n){ 		float:left;		margin: 10px;		position: relative;			left:-40px;		z-index:2;	}.port .one:nth-child(4n){ 		float:left;		margin: 10px;		position: relative;			left:-600px;		z-index:1;	}.port .one:hover{		opacity:1;		z-index:99;		left:+20px;		transition:1s;	}</style><div class="port">	<div class="one">		<img src="img3"/>    </div>    <div class="one">    	<img src="img2"/>    </div>    <div class="one">    	<img src="img1"/>    </div></div>

Когда навожу на картинку, нужно чтобы она выехала на 20 пикселей вправо! Как это сделать? что-то всё никак не выходит.

Вот набросал СSS

Вот трошки исправил, вроде адекватнее работает, но не знаю, правильно ли так? 

<style type="text/css">

.port{

height:200px;

width:80%;

margin: 0 auto;

}

.port .one{ 

width:0px;

height:300px;

opacity:0.8;

transition:1s;

}

.port img{

-webkit-transform: perspective(1000px) rotateY(40deg);

transform: perspective(1000px) rotateY(40deg);

width:200px;

height:300px;

}

.port .one:nth-child(1n){ 

float:left;

margin: 10px;

position: relative;

left:0px;

z-index:4;

}

.port .one:nth-child(2n){ 

float:left;

margin: 10px;

position: relative;

left:0px;

z-index:3;

}

.port .one:nth-child(3n){ 

float:left;

margin: 10px;

position: relative;

left:0px;

z-index:2;

}

.port .one:nth-child(4n){ 

float:left;

margin: 10px;

position: relative;

left:-600px;

z-index:1;

}

.port .one:hover{

opacity:1;

left:20px;

transition:1s;

}

</style>

 

<div class="port">

<div class="one">

<img src="https://pp.vk.me/c624524/v624524584/1eac0/-r0PTrRYUcU.jpg"/>

    </div>

    <div class="one">

    <img src="https://pp.vk.me/c620320/v620320584/217a2/eTmlhbfdMho.jpg"/>

    </div>

    <div class="one">

    <img src="https://pp.vk.me/c308818/v308818584/3869/PY3A10QrI-k.jpg"/>

    </div>

 

</div>

Edited January 27, 2015 by xTODx

[rus]

выкладывайте код на http://jsfiddle.net