"The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element."
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
So what is it exactly ?
We have two Divs, one for the photo, one for the Text and button. We want to control the first one (zoom effect) by hovering on the second one.
So we use an Adjacent sibling combinator because both Divs are children of the same parent element (the Section).
But it can only work when we use the first Div, to target the second Div. We can't do the opposite, using the second Div to target the first one.
So the trick is to build it like this:
And then use the flex-direction in row-reverse so it will show up like that:
We don't need to do that in the second example below, as both Divs are already in a good order.