"grid"
Bootstrap 4.1.1 Snippet by evarevirus

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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" /> <link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" /> <title>CodePen - CSS3 Scaling Thumbnails</title> <style> /* Mixins */ /* Colors */ /* Some */ body { margin: 30px 0 0 40px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } /* Thumbnail Element */ .thumbnail { position: relative; display: inline-block; width: 300px; height: 180px; margin: 0 10px 10px 0; background: #fff; text-align: center; overflow: hidden; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); transform: translateZ(0); } .thumbnail.green { background: #1b5a2a; } .thumbnail.blue { background: #1c3c5a; } .thumbnail.red { background: #5a1f1a; } .thumbnail.purple { background: #331f5a; } .thumbnail img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .2; cursor: pointer; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); transform: translateZ(0); -webkit-filter: blur(2px); -moz-filter: blur(2px); filter: blur(2px); } .thumbnail .title { position: absolute; left: 0; top: 40%; width: 100%; text-align: center; text-transform: uppercase; color: rgba(255, 255, 255, 0.9); font-weight: 600; font-size: 1.5rem; opacity: .999; cursor: pointer; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); transform: translateZ(0); } .thumbnail:hover { z-index: 999; -webkit-transform: scale(1.1) rotate(0.1deg); -moz-transform: scale(1.1) rotate(0.1deg); transform: scale(1.1) rotate(0.1deg); box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.5); } .thumbnail:hover .title { -webkit-transform: scale(0.85) rotate(0.1deg); -moz-transform: scale(0.85) rotate(0.1deg); transform: scale(0.85) rotate(0.1deg); color: rgba(255, 255, 255, 0); } .thumbnail:hover img { opacity: 1; -webkit-filter: blur(0); -moz-filter: blur(0); filter: blur(0); } .thumbnail:active { -webkit-transform: scale(1.08) rotate(0.1deg); -moz-transform: scale(1.08) rotate(0.1deg); transform: scale(1.08) rotate(0.1deg); box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.7); } .thumbnail:active img { opacity: 0.7; } </style> <script> window.console = window.console || function(t) {}; </script> <script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); } </script> </head> <body translate="no"> <a class="thumbnail green"> <img src="https://cl.ly/image/3m1y2Q2C0o3o/0410.jpg"> <span class="title"> Green Frog </span> </a> <a class="thumbnail red"> <img src="https://cl.ly/image/0o2N2W0X0s28/FROGpoison-dart-frog_5869_600x450.jpg"> <span class="title"> Red Frog </span> </a> <a class="thumbnail blue"> <img src="https://cl.ly/image/20342H2a2d29/tumblr_m4zl640xqN1rxrpico2_1280.jpg"> <span class="title"> Blue Frog </span> </a> <a class="thumbnail purple"> <img src="https://cl.ly/image/2N2J1t351r3D/frog-picture.jpg"> <span class="title"> Purple Frog </span> </a> <a class="thumbnail green"> <img src="https://cl.ly/image/3m1y2Q2C0o3o/0410.jpg"> <span class="title"> Green Frog </span> </a> <a class="thumbnail red"> <img src="https://cl.ly/image/0o2N2W0X0s28/FROGpoison-dart-frog_5869_600x450.jpg"> <span class="title"> Red Frog </span> </a> <a class="thumbnail blue"> <img src="https://cl.ly/image/20342H2a2d29/tumblr_m4zl640xqN1rxrpico2_1280.jpg"> <span class="title"> Blue Frog </span> </a> <a class="thumbnail purple"> <img src="https://cl.ly/image/2N2J1t351r3D/frog-picture.jpg"> <span class="title"> Purple Frog </span> </a> <a class="thumbnail green"> <img src="https://cl.ly/image/3m1y2Q2C0o3o/0410.jpg"> <span class="title"> Green Frog </span> </a> <a class="thumbnail red"> <img src="https://cl.ly/image/0o2N2W0X0s28/FROGpoison-dart-frog_5869_600x450.jpg"> <span class="title"> Red Frog </span> </a> <a class="thumbnail blue"> <img src="https://cl.ly/image/20342H2a2d29/tumblr_m4zl640xqN1rxrpico2_1280.jpg"> <span class="title"> Blue Frog </span> </a> <a class="thumbnail purple"> <img src="https://cl.ly/image/2N2J1t351r3D/frog-picture.jpg"> <span class="title"> Purple Frog </span> </a> <a class="thumbnail green"> <img src="https://cl.ly/image/3m1y2Q2C0o3o/0410.jpg"> <span class="title"> Green Frog </span> </a> <a class="thumbnail red"> <img src="https://cl.ly/image/0o2N2W0X0s28/FROGpoison-dart-frog_5869_600x450.jpg"> <span class="title"> Red Frog </span> </a> <a class="thumbnail blue"> <img src="https://cl.ly/image/20342H2a2d29/tumblr_m4zl640xqN1rxrpico2_1280.jpg"> <span class="title"> Blue Frog </span> </a> <script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js"></script> <script id="rendered-js"> /* Needs some optimizing on mobile. Blur and box-shadows are pretty buggy there. Works best on desktop in Chrome & Safari. */ //# sourceURL=pen.js </script> </body> </html>

Related: See More

Rubik Presentation Page
Pinterest-like Responsive Grid
Grid Columns Divider
Bootstrap Editable jQuery Grid

Questions / Comments: