JSFiddle - React, Tailwind, and code Playground

by Himanshu Joshi

HTML

<div id="home-gal-col"> <span class="span-homegal">
        <a href="/listings/category/accessories/">
            <div class="polaroid">
                <img src="/images/homegal/picture.jpg"/>
                <p>picture</p>
            </div>
        </a>
       </span>
</div>

CSS

#home-gal-col {
  width: 15%;
  float: left;
  padding: 5px;
}

.polaroid {
  border: 10px solid #fff;
  border-bottom: 15px solid #fff;
  -webkit-box-shadow: 3px 3px 3px #777;
  -moz-box-shadow: 3px 3px 3px #777;
  box-shadow: 3px 3px 3px #777;
  -webkit-transition: margin 0.2s ease-out;
  -moz-transition: margin 0.2s ease-out;
  -o-transition: margin 0.2s ease-out;
}

.polaroid img {
  margin: 0 auto;
  width: 100%;
}

.polaroid p {
  text-align: center;
  color: #D51386;
}

.span-homegal a {
  -webkit-transition: margin 0.2s ease-out;
  -moz-transition: margin 0.2s ease-out;
  -o-transition: margin 0.2s ease-out;
}

.span-homegal a:hover {
  margin-bottom: 5px;
}

.polaroid:hover {
  margin-top: -10px;
}