CSS Element Transition/Animation: Opacity Issue - html

Question

First, here is the page I'm referencing: https://hypemarketing.co.uk/portfolio/
I've been trying to figure out how the transition effect on these logos work in Chrome's inspect element console for hours. Essentially the logo transitions to underlying text upon hovering but when trying to recreate the effect using what I thought the mechanism properties were, z-index, transform, and transition, I couldn't get it to trigger. I've searched through MDN, W3Schools, and other Stack Overflow pages but couldn't find a clear explanation.
Can someone please explain to me how this effect works? Appreciate any help with this!
Note: I'm new to coding so forgive me if the answer to this is super simple.
Update: Thanks to a commenter below I learned how the effect works! However on trying it for myself I still couldn't get it to trigger. I found a similar answer on SO that mentioned visibility, but after inserting the code still didn't run. I'm not sure where the issue is. Here is my code: https://jsfiddle.net/eyd0jdap/
HTML:
<div class="container">
<img class="logo" src="http://www.pngall.com/wp-content/uploads/2016/06/Nike-Logo-Free-PNG-Image.png">
<p class="services"> This is sample text.
<br> And some more sample text.</p>
</div>
CSS:
.container {
position: relative;
background-color: lightblue;
display: block;
height: 300px;
width: 300px;
z-index: -10;
}
.logo {
height: 150px;
width: 150px;
z-index: 2;
padding-top: 80px;
padding-left: 80px;
visibility: visible;
opacity: 1;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.logo:hover {
opacity: 0;
visibility: hidden;
}
.services {
position: absolute;
left: 25px;
top: 35%;
font-family: "times new roman";
font-size: 22px;
text-align: center;
z-index: 5;
opacity: 0;
visibility: hidden;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.services:hover {
opacity: 1;
visibility: visible;
}

Answer 1

There are a few problems with your implementation of this. Firstly you need to remove the z-index from your css as it is unnecessary and causes a few problems down the line. Now change the :hover event so it is dependant on the container not the text and logo. This means they will always fade out/in in sync with each other.
.container:hover > .logo{
opacity: 0;
}
.container:hover > .services{
opacity: 1;
}
The rest of the code remains the same.
Link to codepen: https://codepen.io/pixelshadow/pen/BmKOdP?editors=1100