Design Sets
Unlimited Elements

Orange Captions

A unique way to show some short captions
Non-digital photographs are produced with a two-step chemical process.
MORE INFO

Panoramic format images can be taken with cameras like the Hasselblad Xpan on standard film
MORE INFO

THIS IS JUST A COOL CAPTION

THIS IS JUST A COOL CAPTION

Adjacent sibling combinator

"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.