анимированные ленты с помощью CSS - ленты Позиция

Question

JSFiddle: http://jsfiddle.net/jvtt8kgz/

HTML:

<div style="width: 99%; margin: 0; padding: 0; text-align: left; overflow: hidden;"> 
    <div style="width: 33%; float: left; overflow: hidden; text-align: center; margin: 15px 0 15px 0;"> 
     <div id="mPra" lang="is" class="mainHolder imgPra"> 
      <figure> 
       <figcaption class="fig11">Group Profile</figcaption> 
       <figcaption class="fig22">Edit</figcaption> 
      </figure> 
     </div> 
    </div> 
    <div style="width: 33%; float: left; overflow: hidden; text-align: center; margin: 15px 0 15px 0;"> 
     <div id="mPro" lang="is" class="mainHolder imgPro"> 
      <figure> 
       <figcaption class="fig11">Provider Profile</figcaption> 
       <figcaption class="fig22">Edit</figcaption> 
      </figure> 
     </div> 
    </div> 
    <div style="width: 33%; float: left; overflow: hidden; text-align: center; margin: 15px 0 15px 0;"> 
     <div id="mSit" lang="is" class="mainHolder imgSit"> 
      <figure> 
       <figcaption class="fig11">Site Profile</figcaption> 
       <figcaption class="fig22">Edit</figcaption> 
      </figure> 
     </div> 
    </div> 
    <br style="clear: both;" /> 
    <div style="width: 50%; float: left; overflow: hidden; text-align: center; margin: 15px 0 15px 0;"> 
     <div id="mCli" lang="is" class="mainHolder imgCli"> 
      <figure> 
       <figcaption class="fig11">Client Profile</figcaption> 
       <figcaption class="fig22">Edit</figcaption> 
      </figure> 
     </div> 
    </div> 
    <div style="width: 50%; float: left; overflow: hidden; text-align: center; margin: 15px 0 15px 0;"> 
     <div id="mAcc" lang="is" class="mainHolder imgAcc"> 
      <figure> 
       <figcaption class="fig11">Accountable Party Profile</figcaption> 
       <figcaption class="fig22">Edit</figcaption> 
      </figure> 
     </div> 
    </div> 
</div> 

Как я могу изменить CSS для класса fig22, так что речь идет о противоположном (левом верхнем углу, а также согласования рубильник углы) класса fig11.

Пример:

Answer 1

Очень просто:

1-

.mainHolder figure { 
    margin: 0; /* add this */ 
    padding: 0; /* add this */ 
} 

2-

.mainHolder figcaption.fig11 { 
    left: -30px; /* change this */ 
    bottom: 30px; /* change this */ 
} 
.mainHolder figure:hover figcaption.fig22 { 
    left: -120px; /* change this */ 
    top: 30px; /* change this */ 
} 

Demo: http://jsfiddle.net/jvtt8kgz/3/

Answer 2

Вы должны установить запас элементов "рисунок" под "mainHolder" иметь 0 запас.

.mainHolder figure { 
    width: 200px; 
    height: 200px; 
    overflow: hidden; 
    position: relative; 
    margin: 0; 
} 

Затем вам необходимо соответствующим образом отрегулировать «левые» значения ваших лент.

Answer 3

Попробуйте удалить overflow: hidden из .mainHolder figure и затем отрегулировать :hover для figcaption.fig22, таким образом:

.mainHolder figure { 
    width: 200px; 
    height: 200px; 
    position: relative; 
} 

.mainHolder figure:hover figcaption.fig22 { 
    left: -140px; 
    top: -15px; 
}