JSFiddle - React, Tailwind, and code Playground

Fliplet Image Widget Panels

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-xs-12">
  <div class="col-xs-4">
    <div class="image-holder" style="background-image: url('https://hd.unsplash.com/photo-1470158499416-75be9aa0c4db');">
      <div class="image-overlay">
        <div class="btn btn-primary">Use</div>
      </div>
      <div class="image-info">
        <p>
          <strong>imagename.jpg</strong>
        </p>
        <p>
          Dimension: 1280x720
          <br> Size: 640KB
          <br> Uploaded by Hugo on 04/08/16
        </p>
      </div>
    </div>
    <div class="image-title">
        <p>
          <strong>imagename.jpg</strong>
        </p>
      </div>
  </div>
  <div class="col-xs-4">
    <div class="image-holder" style="background-image: url('https://hd.unsplash.com/photo-1470215645605-f2afbb72eedb');">
      <div class="image-overlay">
        <div class="btn btn-primary">Use</div>
      </div>
      <div class="image-info">
        <p>
          <strong>imagename.jpg</strong>
        </p>
        <p>
          Dimension: 1280x720
          <br> Size: 640KB
          <br> Uploaded by Hugo on 04/08/16
        </p>
      </div>
    </div>
    <div class="image-title">
        <p>
          <strong>imagename.jpg</strong>
        </p>
      </div>
  </div>
  <div class="col-xs-4">
    <div class="image-holder" style="background-image: url('https://hd.unsplash.com/photo-1470224114660-3f6686c562eb');">
      <div class="image-overlay">
        <div class="btn btn-primary">Use</div>
      </div>
      <div class="image-info">
        <p>
          <strong>imagename.jpg</strong>
        </p>
        <p>
          Dimension: 1280x720
          <br> Size: 640KB
          <br> Uploaded by Hugo on 04/08/16
        </p>
      </div>
    </div>
    <div class="image-title">
        <p>
          <strong>imagename.jpg</strong>
        </p>
      </div>
  </div>
  <div class="col-xs-4">
    <div class="image-holder"...

CSS

body {
  background: #f2f6f7;
}

.col-xs-4 {
  margin-top: 40px;
}

.image-holder {
  position: relative;
  width: 100%;
  padding-top: 59%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  border: 1px solid #d9ddde;
}

.image-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.6);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
  cursor: pointer;
}

.image-holder:hover .image-overlay {
  opacity: 1;
}

.image-overlay .btn {
  opacity: 0;
}

.image-holder:hover .image-overlay .btn {
  opacity: 1;
}

.image-info {
  position: absolute;
  left: -1px;
  right: -1px;
  top: 100%;
  background-color: #FFF;
  border: 1px solid #d9ddde;
  padding: 10px;
  margin-top: -1px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.225s ease-in-out;
  transition: all 0.25s ease-in-out;
  z-index: 10;
}

.image-info, .image-title {
  font-size:12px;
}

.image-info p {
  margin-bottom:5px;
}

.image-info p + p {
  font-size:10px;
  margin: 0;
}

.image-holder:hover > .image-info {
  opacity: 1;
  visibility: visible;
}

.image-title {
  padding: 9px 11px;
}

.image-title p {
  margin: 0;
}