html - CSS Box 2.5D Pop Out Shadow effect -


so i'm trying create div element upon hovering, "pop" out, , appear 2.5d box. basically, person looking for:

3d box shadow effect

except animated transition, when not hovered upon, simple 2d box, , when hovered on, appears second image in person's question.

here's fiddle have far:

http://jsfiddle.net/78m3nzv6/

<div class="cat-box bot-row">     <h4>hello world!</h4>     <p>info</p> </div> 

.

.bot-row:hover {     transition: 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: 0.3s ease-in-out; } 

you can in similar way answer linked to, using multiple box-shadow declarations.

i took liberty of converting outline border , setting box-sizing: border-box border doesn't stick out effect.

here live demo:

.bot-row:hover {      transition: 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: 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/


Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -