TUTORIAL™

<style>.imghover img { opacity:0.2;} .imghover .drt {border:140px solid rgba(255, 255, 0, 0.1);opacity:1;}.imghover:hover .drt {border:0px double rgba(0, 0, 0, 0.5);opacity:0;} .imghover:hover img{opacity:1;}.hoversel {-webkit-box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);-moz-box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);border:solid 1px #00ff00;background-color:#;border: 10px solid #2a54aa;-moz-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 2px;height: 270px;margin: 0 auto;overflow: hidden;position: relative;text-align: center;width: 270px;} .hoversel .drt {-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;-ms-transition:all 1s;transition:all 1s;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;width: 270px;height: 270px;position: absolute;overflow: hidden;top: 0;left: 0;cursor:pointer;}.hoversel img {display: block;position: relative;-webkit-transition: all 1s;-moz-transition: all 1s;-o-transition: all 1s;-ms-transition: all 1s;transition: all 1s;}.hoversel a.info {background:#0000ff;display: inline-block;text-decoration: none;padding:0;text-indent:-9999px;width:20px;height:20px;opacity:0;position:relative;-moz-transition: all 0.5s;-webkit-transition: all 0.5s;-o-transition: all 0.5s;-ms-transition: all 0.5s;transition: all 0.5s;}.hoversel:hover a.info {opacity:1;-moz-transform:translateY(100px);-webkit-transform:translateY(100px);-o-transform:translateY(100px);-ms-transform:translateY(100px);transform:translateY(100px);}</style>

<div class="hoversel imghover">
<img src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-ash3/s720x720/734139_185418681601414_170345447_n.jpg" /><div class="drt"></div></div>