"Untitled"
Bootstrap 4.1.1 Snippet by saikrishna99666

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <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'> <link rel="stylesheet" href="style.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">WebDevTrick.com</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">WebDevTrick.com</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">WebDevTrick.com</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">WebDevTrick.com</p> </div> </div> </div> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script> </body> </html>
3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 /** Code By WebDevTrick ( https://webdevtrick.com ) **/ @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 ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } 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; } .card: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; } .card:hover p { background-color: white; } p.desc { z-index:999; position: absolute; top: 10px; padding: 10px; } p.desc:hover { }

Related: See More

Vue Argon Design System

Questions / Comments: