CSS images and texts hovering both - html

Question

I'm trying to apply an effect to my pics when I put the cursor over them. What I want is a greyscale filter and a that a text appears. I've used this code:
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;
}
I get this:
(out of pic)
(hover pic, yes! what I want!)
Which is perfect, but the problem is when the cursor is over the text. That's what happen:
(hover text, noooo!)
I would like to always get the effect of "hover pic" (the second) when I hover the pic or the text.
How could I solve that?
Thanks!

Answer 1

This should fix the issues. The thing is to set :hover of the .upic_wrap selector.
This snippet is based on your initial code, but I think it needs some changes to look like the pictures you posted.
.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
{
border: 1px solid red;
width: 40%;
position: relative;
cursor: pointer;
}
.upic
{
width: 100%;
height: 250px;
}
.upic_text {
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
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="http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png">
<div class="upic_text">Avenida Central</div>
</div>
your query is convert in to fully responsive and solved to something changes in css.