動畫功能區CSS - 蝴蝶結的位置

的jsfiddle：http://jsfiddle.net/jvtt8kgz/動畫功能區CSS - 蝴蝶結的位置

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的角落）。

實施例：

enter image description here

來源

2015-05-27 SearchForKnowledge

很簡單：

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

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

演示：http://jsfiddle.net/jvtt8kgz/3/

來源

2015-05-27 19:04:48 Arbel

有什麼方法可以平滑過渡滑出部分？謝謝。 – SearchForKnowledge

是的，應用過渡到頂部和左側的屬性，請參閱更新的演示。 – Arbel

甚至沒有看到那裏。謝謝。 – SearchForKnowledge

需要設置下「mainHolder」該「數字」的元素的邊緣以具有0餘量。

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

然後，您需要相應地調整色帶的「左」值。

來源

2015-05-27 18:31:46

我添加了一個形象展示，我想了'fig22'當上空盤旋出現。 – SearchForKnowledge

我想通了。謝謝。我玩過CSS。 – SearchForKnowledge

嘗試取出overflow: hidden從.mainHolder figure並且隨後調節:hover爲figcaption.fig22，正是如此：

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

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

來源

2015-05-27 18:49:16

動畫功能區CSS - 蝴蝶結的位置

回答

相關問題