CSS轉換中的文本

當您將鼠標懸停在框上方時，會出現一個三角形，並且我試圖將文本「項目1」放在三角形內，但出於某種原因，它會一直在它之外。我覺得我可能會錯過一些東西。CSS轉換中的文本

此外，三角形沒有假設有一個直的邊緣，文字就是這樣。

.img { 
 
    width: 310px; 
 
    height: 225px; 
 
    background-image: url("http://i58.tinypic.com/33mphuh.png"); 
 
    margin: 10px; 
 
    float: left; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.hover { 
 
    position: absolute; 
 
    bottom: -100%; 
 
    border-style: solid; 
 
    border-width: 200px 0 0 200px; 
 
    border-color: transparent transparent transparent rgba(255, 255, 255, .5); 
 
    -webkit-transition: all .3s; 
 
} 
 
.img:hover .hover { 
 
    bottom: 0; 
 
} 
 
h2 { 
 
    font-family: avenir; 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
    color: #ffff00; 
 
}

<div class="img"> 
 
    <div class="hover"> 
 
    <h2>project</h2> 
 
    </div> 
 
</div>

來源

2015-02-05 sara

如果答案有幫助，可以將其標記爲接受:) – fcalderan 2015-02-13 09:54:14

你h2元素包含適當的具有應用了200px左邊框的元素中。因此，它似乎是外面的，但它實際上是.hover元素中，其父邊框的右側

您可能您的標題與position: absolute定位，並將其移動到左側，越過邊境如本叉： http://jsfiddle.net/nr5aeyvm/

相關CSS

h2 { 
    font-family: avenir; 
    font-size: 16px; 
    font-weight: bold; 
    color: #ffff00; 
    position: absolute; 
    z-index: 2; 
    left: -180px; 
    bottom: 20px; 
}

結果

enter image description here

來源

2015-02-05 17:23:03 fcalderan

項目文本是越來越推出的原因是因爲你使用border創建透明效果。項目文本包含在元素的主體中。所以就像法布里奇奧建議，你可以將其定位在絕對位置或負邊距，以將其拉回到側面。

另一種選擇是將三角形和項目塊的兄弟姐妹彼此和過渡都向上。

來源

2015-02-05 17:40:48 Brodie

CSS轉換中的文本

回答

相關問題