CSS3 - How to make one element(preferably a div element) move while hovering over another element?

css, html

Solution

Here you can use `.container:hover` and combine it with `:not(:hover)`.

DEMO

.container:hover .wrapper:not(:hover) .block {
    margin-left: -400px;
}

Problem

I've been trying to make one element move, like, from one point to the other by hovering over another div element. But I couldn't figure out how to! What I want is this: Say there is a div element, 200x200 and background-color: black. And there is another, but with background-color:red. And if perhaps another one, with background-color:green. They are placed along the center or the screen, vertically. One below the other. When I hover over one of these, the other two will move from in a right to left direction. While the one the cursor is hovering over, will remain still. Any guesses how to do this?

Original source