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转换中的文本

回答

相关问题