JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

HTML

<div class="project flo"> <a href="/frontend/">
            <div class="overlay">
              <div class="text">
                <em>Flo UI Frontend<br>Framework</em>
                <p class="content">Co-authored a frontend framework designed for fast prototyping of flat web design</p>
              </div>
            </div>
          </a>

</div>

CSS

.project {
    position: relative;
    margin: 20px 7px 0 7px;
    width: 250px;
    height: 250px;
    background-color: #ff0000;
    display: inline-block;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    border-radius: 150px;
    text-align: center;
    padding: 0;
    font-size: 12pt;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100%;
    -webkit-transition: 0.75s;
    -moz-transition: 0.75s;
    -ms-transition: 0.75s;
    -o-transition: 0.75s;
    transition: 0.75s;
}
.project a {
    text-decoration: none;
    color: #222;
}
.overlay {
    opacity: 0;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    border-radius: 150px;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    position: absolute;
    top: 50%;
    /*    margin-top: 25%;*/
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: 0.75s;
    -moz-transition: 0.75s;
    -ms-transition: 0.75s;
    -o-transition: 0.75s;
    transition: 0.75s;
}
.overlay:hover {
    opacity: 1;
}
.overlay em {
    font-size: 1.2em;
}