Polaroid Effect Reddit

by Ken Watanabe

HTML

<div class="image-wrap">
    <img class="image-inner" src="http://kenwatanabe.info/library/test_img_01.jpg" alt="" />
    <div class="image information">
      <div class="info-inner">
        information
        <br/>informa
        <br/>info
      </div>
    </div>
</div>

CSS

.image.information {
    position:absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 50px;
    background: red;
    opacity:0.5;
}
.info-inner {
    text-align: left;
    position: absolute;
    top: 50%; 
    left: 50%; 
/*     margin-top:-75px;
    margin-left: -75px; */

    vertical-align: bottom;
    transform: rotate(90deg);
}
.image-wrap {
    height: 100%;
    width: 100%;
    position: relative;
}
img.image-inner {
    width: 300px;
    margin-left: 75px;
}