CSS Box 2.5D Pop Out Shadow effect

Question

So I'm trying to create a div element that upon hovering, will "pop" out, and appear as a 2.5D box. Basically, what this person was looking for:

3D Box Shadow effect

Except animated with a transition, so when not hovered upon, its a simple 2D box, and when hovered on, it appears like the second image in that person's question.

Here's a fiddle with what I have so far:

http://jsfiddle.net/78m3nzv6/

<div class="cat-box bot-row">
    <h4>Hello World!</h4>
    <p>Info</p>
</div>

.

.bot-row:hover {
    transition: all 0.3s ease-in-out;
    transform: translate(10px,10px);
}

.cat-box {
    background-color: grey;
    outline: #DDD8D4 solid 3px;
    padding: 3px 5px 5px 5px;
    margin: 10px 30px 10px 30px;
    transition: all 0.3s ease-in-out;
}

Answer 1

You can actually do this in a very similar way to the answer that you linked to, by using multiple box-shadow declarations.

I also took the liberty of converting your outline to a border and setting box-sizing: border-box so that the border doesn't stick out from the effect.

Here is a Live Demo:

.bot-row:hover {
    transition: all 0.3s ease-in-out;
    transform: translate(10px, 10px);
    box-shadow: -1px -1px 0px #999, -2px -2px 0px #999, -3px -3px 0px #999, -4px -4px 0px #999, -5px -5px 0px #999, -6px -6px 0px #999, -7px -7px 0px #999, -8px -8px 0px #999, -9px -9px 0px #999, -10px -10px 0px #999, -11px -11px 0px #999, -12px -12px 0px #999;
}
.cat-box {
    box-sizing: border-box;
    background-color: grey;
    border: #DDD8D4 solid 3px;
    padding: 3px 5px 5px 5px;
    margin: 10px 30px 10px 30px;
    transition: all 0.3s ease-in-out;
}

<div class="cat-box bot-row">
     <h4>Hello World!</h4>

    <p>Info</p>
</div>

JSFiddle Version: http://jsfiddle.net/78m3nzv6/3/