I have a simple JSFiddle demo here: http://jsfiddle.net/cppvf4eb/

When hovering over the green block, I would like two push the other two blocks away by 10 pixels. Currently I use this code for the effect:

#block2:hover {
    margin: 0px 10px;
}

The current behavior keeps the blue block stationary, but I want the green block to stay put. Maybe margin isn't the best solution to this, let me know if there are better. I would prefer a CSS only solution if it exists.

Clarification: The end goal is to be able to hover over each individual block and create a 10px space between any bordering block. I don't mind the end blocks shifting position, but for the middle block, I'd like an effect that leaves it stationary, and instead pushes the other two away.

This fiddle should fit your need:

.row:hover {
    margin: 0px -10px;
}

.row .block:hover {
    margin: 0px 10px;
}

http://jsfiddle.net/qmm1m3wh/3/

more