<head>
  <meta charset="UTF-8">
  <title>3D Image Gallery In CSS | Webdevtrick.com</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
</head>
<body>

  <div class="container">
  <div class="row">
    <div class="col-md-3">
      <div class="cardholder">
        <div class="card">
          <img src="https://webdevtrick.com/wp-content/uploads/image-slider1.jpg" />
			<p class="desc">3D CSS Image Gallery </p>
        </div>
      </div>
    </div>
    
    <div class="col-md-3">
      <div class="cardholder">
        <div class="card">
           <img src="https://webdevtrick.com/wp-content/uploads/image-slider2.jpg" />
          <p class="desc">3D CSS Image Gallery </p>
        </div>
      </div>
    </div>
    
    <div class="col-md-3">
      <div class="cardholder">
        <div class="card">
          <img src="https://webdevtrick.com/wp-content/uploads/image-slider3.jpg" />
			<p class="desc">3D CSS Image Gallery </p>
        </div>
      </div>
    </div>
    
    <div class="col-md-3">
      <div class="cardholder">
        <div class="card">
          <img src="https://webdevtrick.com/wp-content/uploads/image-slider4.jpg" />
			<p class="desc">3D CSS Image Gallery </p>
        </div>
      </div>
    </div>
    
    
  </div>
</div>
</body>

@import url("https://fonts.googleapis.com/css?family=Titillium+Web");
body {
  font-family: "Titillium Web", sans-serif;
  color: white;
  background: linear-gradient(to left, #ffc3a0, #ffafbd);
}
h1 {
  text-transform: uppercase;
  font-size: 4em;
}
img {
  height: 300px;
}
.cardholder {
  margin-top: 150px;
  perspective: 600px;
  .card {
    width: 300px;
    height: 300px;
    background-color: transparent;
    transform: rotateY(50deg);
    box-shadow: -6px 5px 13px 2px rgba(0, 0, 0, 0.25);
    transition: all 1s ease;
    color: transparent;
    &:hover {
      width: 300px;
      height: 300px;
      background-color: transparent;
      transform: rotateY(0deg);
      box-shadow: 0px 0px 36px 2px rgba(0, 0, 0, 0.25);
      color: black;
      p {
        background-color: white;
      }
      p.desc {
        z-index: 999;
        position: absolute;
        top: 10px;
        padding: 10px;
      }
    }
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.