Relaciones Estilo FotosGrandes

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"><link href="https://fonts.googleapis.com/css?family=Montserrat:600,800|Merriweather:400,400i&display=swap" rel="stylesheet">

<div class="miBaul"><div class="datspri"><div class="datoPrinc"><div class="img"><img src="https://placehold.jp/60x60.png"></div><div class="nomb">Maeve A. Sullivan</div><div class="modul-peque"><div class="phas"><i class="fas fa-quote-left"></i> You want me, I want you, baby<br/>My sugar boo, I'm levitating. <i class="fas fa-quote-right"></i></div></div></div></div><div class="contenedorgra"><div class="modul-dt"><img src="https://placehold.jp/123x200.png"><div class="detall"><i class="fas fa-user-clock"></i><br/><a href="#">cronología</a></div></div><div class="modul-dt"><img src="https://placehold.jp/123x200.png"><div class="detall"><i class="fas fa-users"></i><br/><a href="#">Relaciones</a></div></div><div class="modul-dt"><img src="https://placehold.jp/123x200.png"><div class="detall"><i class="fas fa-rocket"></i><br/><a href="#">Redes Sociales</a></div></div><div class="modul-dt"><img src="https://placehold.jp/123x200.png"><div class="detall"><i class="fas fa-user-clock"></i><br/><a href="#">cronología</a></div></div><div class="modul-dt"><img src="https://placehold.jp/123x200.png"><div class="detall"><i class="fas fa-users"></i><br/><a href="#">Relaciones</a></div></div><div class="modul-dt"><img src="https://placehold.jp/123x200.png"><div class="detall"><i class="fas fa-rocket"></i><br/><a href="#">Redes Sociales</a></div></div></div></div><div class="cred"><a href="http://bettyleg.tumblr.com">bettyleg</a></div>

<style>.datspri{width:181px;} .contenedorgra{width:372px; display:grid; grid-template-columns:auto auto auto;} .miBaul {width:553px; margin:10px auto; background:#fff; display: grid; grid-template-columns:auto auto; outline:1px solid #eee; padding-bottom:0px; justify-content: center; align-items: center;} .datoPrinc{width:181px; height:300px;background:#fff; padding-top:15px;} .nomb{margin: 0px auto; text-align:center;display: flex; justify-content: center; align-items: center; font-family: 'Montserrat', sans-serif; font-weight:800; text-transform:uppercase; color:#F99B7E; font-size:20px; border-bottom:1px solid #eee; padding:0px 28px 15px;} .modul-peque{display: flex; flex-flow: column; width: 180px; height:145px; justify-content: center; align-items: center; } .phas{font-family: 'Merriweather', serif; font-size:12px; font-style:italic; color:#888; padding:10px 20px; text-align:center; line-height:18px;} .img{width:60px; height:60px; border:1px solid #eee; padding:2px; border-radius:180px; margin:0px auto 10px; } .img img{width:60px; height:60px; border-radius:180px;} .phas i{position:relative; color: #F99B7E; opacity: .8; font-size:10px; padding:0px 1px;}.cred{margin:0px auto; margin-top:-5px; width:280px; text-align:center;background:#fff;border:1px solid #eee;} .cred a{text-decoration:none; color:#888; text-transform:uppercase; font-size:8px; font-family:arial; letter-spacing:2px;} .modul-dt{width:123px; height:200px; border-left:1px solid #eee; overflow:hidden; margin-bottom:.5px;} .modul-dt:hover img{opacity:1; webkit-transition: .3s;-o-transition:.3s;transition: .3s; background-size:cover; -webkit-filter: grayscale(0);} .modul-dt:hover{background:#000;} .modul-dt img{opacity:.9; background:#000; -webkit-filter: grayscale(1); width:123px; height:200px;} .detall{margin-top:-90px; padding:15px; position:relative; line-height:10px; text-align:right;} .detall i{color:#F99B7E; font-size:35px; display:block; margin-bottom:-4px;} .detall a{text-decoration:none; color:#fff;font-family: 'Montserrat', sans-serif; font-weight:600; text-transform:uppercase; font-size:10px; } .modul-dt:hover .detall i{color:#fff;} .modul-dt:hover .detall a{color:#fff;} </style>