CSS Box 2.5D Pop Out Shadow effect - html

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/