"Galería v.0.2 - RM92"
Bootstrap 4.0.0 Snippet by efepimenta

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> </head> <body> <div class="container"> <h1 class="text-left bg-info mb-3 text-white p-2 ch2"><span class="fa fa-thumb-tack bg-primary"></span>Bienvenidos a la galería <small class="text-light text-right d-block">Suma tus imagenes a nuestra galería</small></h1> <div class="row p-2"> <div class="col-sm-4"> <div class="card rm"> <h5 class="head">Titulo <span class="fa fa-user-circle-o float-right"></span></h5> <img class="card-img-top" src="http://guapo.tv/wp-content/uploads/2014/10/Xuntzu_logo_design_by_Guapo_Esteban_Ibarra-04-500x500.png" alt="Card image cap"> <div class="card-body cb"> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> <div class="col-sm-4"> <div class="card rm"> <h5 class="head">Titulo <span class="fa fa-user-circle-o float-right"></span></h5> <img class="card-img-top" src="https://it-okcenter.com/wp-content/uploads/2017/06/android-500x500.png" alt="Card image cap"> <div class="card-body cb"> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> <div class="col-sm-4"> <div class="card rm"> <h5 class="head">Titulo <span class="fa fa-user-circle-o float-right"></span></h5> <img class="card-img-top" src="https://it-okcenter.com/wp-content/uploads/2017/07/stackme-500x500.png" alt="Card image cap"> <div class="card-body cb"> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> </div> <div class="row p-2"> <div class="col-sm-4"> <div class="card rm"> <h5 class="head">Titulo <span class="fa fa-user-circle-o float-right"></span></h5> <img class="card-img-top" src="http://blog.pxsglobal.com/wp-content/uploads/2016/07/C1004_reloj-blando-dali15-500x500.jpg" alt="Card image cap"> <div class="card-body cb"> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> <div class="col-sm-4"> <div class="card rm"> <h5 class="head">Titulo <span class="fa fa-user-circle-o float-right"></span></h5> <img class="card-img-top" src="https://storage.googleapis.com/material-design/publish/material_v_11/assets/0Bx4BSt6jniD7dkRYelJkeklqWFU/materialdesign_principles_motion.png" alt="Card image cap"> <div class="card-body cb"> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> <div class="col-sm-4"> <div class="card rm"> <h5 class="head">Titulo <span class="fa fa-user-circle-o float-right"></span></h5> <img class="card-img-top" src="https://tutorialzine.com/media/2016/11/bootstrap-4-grid-whats-new.png" alt="Card image cap"> <div class="card-body cb"> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> </div> <hr> <div class="clearfix"> </div> <h5 class="text-center">Copyright © 2017 - Miguel92</h5> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> </body> </html>
.ch2 span { padding: 4px 10px; border-radius: 10em; font-size: .8em; box-shadow: 0 0 3px #333; margin-right: 10px; } .ch2 small { font-size: .5em; } .rm { width: 100%; } .rm .card-img-top { border-radius: 0!important; height: 350px; } .cb { margin-top: -7em; background-color: rgba(255,255,255,.5); transition: all .3s; } .cb:hover { background-color: rgba(0,0,0,.8); color: #FFF; transition: all .3s; } .head { margin-bottom: -1.6em; background-color: rgba(255,255,255,.5); padding: 5px; z-index: 1; }

Related: See More

Paper Kit

Questions / Comments: