SpV-box-shadow-to-meta

by sanford

HTML

<div class="outer" ><div class="pic" >
    <img src="http://dummyimage.com/200/200/ccc" /></div><div class="meta"></div></div>    
<div class="outer" ><div class="pic">
    <img src="http://dummyimage.com/160/160/ccc" /></div><div class="meta"></div></div>    
<div class="outer" ><div class="pic">
    <img src="http://dummyimage.com/120/120/ccc" /></div><div class="meta"></div></div>

CSS

BODY { background: rgb(200,204,212); padding: 20px;}
.pic {
    width: 220px;
    height:260px;
    outline: gray solid 1px;
    float:left;
    position:relative;
    background: lightyellow;
    font: 0/260px Courier;
    text-align:center;
    z-index:1;
    position:relative;
}
.meta {
    width: 440px;
    height:340px;
    outline: gray solid 1px;
    float:left;
    ZZmargin-left:11px;
    position:relative;
    background:white;
    left:-220px;
    z-index:0;
    
}
.meta { 
    opacity:0;
    -webkit-transition: opacity 200ms ease-out;
}
.pic:hover + .meta,.meta:hover {
    opacity: 1;
    -webkit-transition: opacity 260ms ease-out;
}
.pic:before {
    content:"";
    border-left: 85px solid gray;
    border-top: 26px solid transparent;
    height:0;
    width:0;
    position:absolute;
    bottom:0px;
    left:0px;
}
.pic:after {
        content:"";
    border-left: 82px solid yellowgreen;
    border-top: 25px solid transparent;
    height:0;
    width:0;
    position:absolute;
    bottom:0px;
    left:0px;
}
.meta:before {
    content:"";
    border-left: 290px solid rgb(200,204,212);
    border-top: 110px solid transparent;
    height:0;
    width:0;
    position:absolute;
    bottom:-1px;
    left:-1px;
}
Z.meta:after {
        content:"";
    border-right: 85px solid rgb(200,204,212);
    border-bottom: 26px solid transparent;
    height:0;
    width:0;
    position:absolute;
    top:-1px;
    right:-1px;
}
IMG {
    display:inline-block;
    vertical-align: middle;
    ZZheight: 160px;
    ZZwidth: 160px;
    ZZline-height: 100px;

}