CSS图像和文本都徘徊

Question

当我将光标放在图片上时，我正在尝试对它们应用效果。我想要的是一个灰度过滤器，并且出现一个文本。我使用了以下代码：

HTML:

<div class="upic_wrap">
    <img class="upic" src="foo.jpg"> 
    <div class="upic_text">Avenida Central</div>
</div>

CSS:

.upic_text {
    position:absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%, -50%);
    visibility:hidden;
    opacity:0;
}
.upic:hover {
    opacity:0.5;
    -webkit-filter:grayscale(100%); 
    filter:grayscale(100%);
}
.upic_wrap:hover .upic_text {
    visibility:visible;
    opacity:1;
    color:#000;
    text-align:center;
    text-shadow:1px 1px yellow;
}

我明白了：

（图片之外）

（悬停图片，是的！我想要什么！）

这是完美的，但是问题是当光标位于文本上方时。就是这样： （悬停文字，不！）

当我悬停图片或文字时，我总是希望获得“悬停图片”（第二个）的效果。

我该如何解决？

谢谢！

Answer 1

这应该解决问题。事情是设置:hover选择器的.upic_wrap。

此代码段基于您的初始代码，但我认为它需要进行一些更改才能看起来像您发布的图片。

.upic_text {
    position:absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%, -50%);
    opacity:0;
}
.upic_wrap:hover .upic {
    opacity:0.5;
    -webkit-filter:grayscale(100%); 
    filter:grayscale(100%);
}
.upic_wrap:hover .upic_text {
    visibility:visible;
    opacity:1;
    color:#000;
    text-align:center;
    text-shadow:1px 1px yellow;
}

<div class="upic_wrap">
    <img class="upic" src="https://i.stack.imgur.com/DKgfx.png"> 
    <div class="upic_text">Avenida Central</div>
</div>

Answer 2

.upic_wrap
{
    width: 40%;
    position: relative;
    cursor: pointer;
}
.upic
{
    width: 100%;
    height: 250px;
}
.upic_text {
    position:absolute;
    top: 50%;
    left: 40%;
    display: none;
}
.upic_wrap:hover .upic {
    opacity:0.5;
    -webkit-filter:grayscale(100%); 
    filter:grayscale(100%);
}
.upic_wrap:hover .upic_text {
    display: block;
    opacity:1;
    color:#000;
    text-align:center;
    text-shadow:1px 1px yellow;
}

<div class="upic_wrap">
	 <img class="upic" src="DKgfx.png"> 
	 <div class="upic_text">Avenida Central</div>
</div>

您的查询将转换为完全响应的查询，并解决了CSS中的某些更改。