Best way to change div width on hover

Question

How did the creator of this portfolio website make that cool image effect? http://www.adhamdannaway.com/

Im currently training my self to learn the more advanced stuff but im having trouble with this effect.

The way i did it is make a container with a width of 1280px (1280px is width of img). Made 2 images one with color and other black and white. 2 divs width a width of 50% and float left, float fight. the right one didnt appear right so ive used this: background-position: top right and it worked. They centered perfect even on bigger screen sizes. But the problem lies here. How can i make it so when i hover the left div the div gets width 100%. and the same for the other div.

I know i can do it with #div:hover and then width 100% and the fixed that the image gets above with z-index but thats only happening when im hovering but not when ive dehovered. Obvious becouse its on :hover. But i currently have no clue how to do this on a better/right way.

Ive put the code on jsfiddle.net/aLyde6pa/ but it doesnt work for some reason.

Ive probably explained more than i should but i hope you guys can help me.

Thanks in advance!

ps: English is not my main language. :)

Answer 1

Yes, with CSS you can do something similar with "Transition" but not as animated as in the example because you are limitated with CSS what to change on hover. As I know you can't change elements before the element you hover over ( correct me if I'm wrong )

Here is a simple example ( https://jsfiddle.net/9510a6kj/ ) :

HTML

<div class="left"></div>
<div class="right"></div>

CSS

.left, .right{
    float:left;
}

.left{
    background: red;
    width: 200px;
    height: 300px;
    transition: width 1s ;
}

.right{
    background: blue;
    width: 300px;
    height: 300px;
    transition: width 1s;
}

.left:hover{
    width: 300px;
}

.left:hover + .right{
    width: 100px;
}

Maybe this helps

Transiton will "animate" ( more delay ) the change from width A to B

Cheers