图像变暗和文本缩放

我有一个图像，我有一些文本。当我将鼠标悬停在图像上时，我希望图像变暗并放大。这是正常工作的，但是我遇到的问题是图像上的文字变暗，因为图像变暗。我不希望文字与图像混淆。我怎样才能做到这一点？图像变暗和文本缩放

检查this Bootply的代码

注意：图像被作为一个包含我的文本的div背景

来源

2016-02-12 user765368

不透明度会影响所有的子元素，你就需要重新组织布局代码来让这个要使用ISN文本元素这个人的一个孩子元素是透明的。 – Jhecht

你能提供一个更清洁的代码吗？ – Microsmsm

寻求代码帮助的问题必须包含在问题本身**中重现**所需的最短代码。尽管您已经提供了一个示例链接，但如果链接无效，那么您的问题对于其他未来具有相同问题的SO用户将没有任何价值。 –

发生这种情况是因为你对父母的包装，它适用于设置opacity: .444;所有的孩子也是如此。

除了调整不透明度外，我还会使用伪元素淡入覆盖图层，并将z-index添加到文本包装图层以保持其高于覆盖层。

.hovereffect .overlay2 { 
    /* your styles here */ 
    z-index: 1; 
} 

.hovereffect:after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background-color: rgba(0,0,0,0.5); 
    opacity: 0; 
    transition: opacity 250ms ease-in-out; 
}

然后悬停，不透明度设置为1

.hovereffect:hover:after { opacity: 1; }

来源

2016-02-12 21:12:37

试过了，没有工作 – user765368

@ user765368你可以发布你试过的代码吗？谢谢！ –

图像变暗和文本缩放

回答

相关问题