Fade one element out while fade in background element on hover - css

Question

I want to fade out a text placed on an image on hover and fade in another from the background.
So far the fade out part is working, but the fade in part not. See "run code snippet".
I want fade out the first text completely but not fully cover the background image which is why the opacity of:
location-wrapper { background-color: rgba(0, 0, 0, 0.6);}
is set to 0.6 and:
.location-wrapper:hover {
background-color: rgb(255, 255, 255);
opacity: 0.7;
}
set to 0.7.
If I set the opacity of the background text to 1, I can see the background text is there, but the transition on hover to blend it in is not working. I guess because the div is in the background and the hover of the first div is triggered and not the hover option of the background?
.location-container {
position: relative;
height: 200px;
width: 100%;
color: white;
}
.location-bg-image {
position: absolute !important;
width: 100%;
height: 100%;
background-color: transparent;
z-index: -1;
}
.location-wrapper {
background-color: rgba(0, 0, 0, 0.6);
text-align: center;
position: absolute;
width: 100%;
height: 100%;
z-index: 10;
opacity: 1;
transition: 2s;
}
.location-wrapper:hover {
background-color: rgb(255, 255, 255);
opacity: 0.7;
}
.location-overlay {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.location-city {
padding-bottom: 60px;
color: white;
font-size: 25px;
font-weight: 400;
}
.location-text-wrapper {
height: 100%;
padding-top: 40px;
width: 100%;
opacity: 1;
transition: 5s;
display: flex;
flex-direction: column;
-ms-flex-align: center;
align-items: center;
justify-content: center;
}
.location-text-wrapper:hover {
opacity: 1;
}
.location-text {
color: white;
font-size: 18px;
opacity: 0;
transition: 5s
}
.location-text:hover {
opacity: 1;
}
<div class="location-container">
<Image class="location-bg-image" src="https://via.placeholder.com/150/000000/FFFFFF/"/>
<div class="location-wrapper has-bg-image">
<div class="location-overlay">
<div class="location-city">ExampleCity</div>
</div>
</div>
<div class="location-text-wrapper">
<div class="location-text">ExampleBackgroundText</div>
</div>
</div>

Answer 1

You don't need to have a separate .location-text-wrapper. I've changed your HTML a bit in the snippet below. I've inserted .location-text inside .location-overlay, and on .location-wrapper:hover I'm updating the value of opacity for .location-city and .location-text. This will give you the behaviour that you desire.
.location-container {
position: relative;
height: 200px;
width: 100%;
color: white;
}
.location-bg-image {
position: absolute !important;
width: 100%;
height: 100%;
background-color: transparent;
z-index: -1;
}
.location-wrapper {
background-color: rgba(0, 0, 0, 0.6);
text-align: center;
position: absolute;
width: 100%;
height: 100%;
z-index: 10;
opacity: 1;
transition: 2s;
}
.location-wrapper:hover {
background-color: rgb(255, 255, 255);
opacity: 0.7;
}
.location-overlay {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 1
}
.location-city {
padding-bottom: 60px;
color: white;
font-size: 25px;
font-weight: 400;
opacity: 1;
transition: 5s;
}
.location-wrapper:hover .location-city {
opacity: 0;
}
.location-wrapper:hover .location-text {
opacity: 1;
}
.location-text {
color: black;
font-size: 18px;
opacity: 1;
transition: 5s
}
<div class="location-container">
<Image class="location-bg-image" src="https://via.placeholder.com/150/000000/FFFFFF/"/>
<div class="location-wrapper has-bg-image">
<div class="location-overlay">
<div class="location-city">ExampleCity</div>
<div class="location-text">ExampleBackgroundText</div>
</div>
</div>
</div>