<div class="container-fluid contenedor text-center">
<h1 class="text-center">CARDS BY Francisco Kataldo</h1>
<div class=" container text-center">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 container_foto ">
<div class="ver_mas text-center">
<span class="lnr lnr-eye"></span>
</div>
<article class="text-left">
<h2>TÍTULO DE <br>LA IMAGEN</h2>
<h4>Descripción corta de la imagen en cuestión</h4>
</article>
<img src="https://img-aws.ehowcdn.com/400x400/ds-img.studiod.com/Half_Dome_from_Glacier_Point0_1.jpg" alt="">
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 container_foto">
<div class="ver_mas text-center">
<span id="click" class="lnr lnr-eye"></span>
</div>
<article class="text-left">
<h2>TÍTULO DE <br>LA IMAGEN</h2>
<h4>Descripción corta de la imagen en cuestión</h4>
</article>
<img src="https://pbs.twimg.com/profile_images/781518570018648065/HcvZhTVn_400x400.jpg" alt="">
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 container_foto">
<div class="ver_mas text-center">
<span class="lnr lnr-eye"></span>
</div>
<article class="text-left">
<h2>TÍTULO DE <br>LA IMAGEN</h2>
<h4>Descripción corta de la imagen en cuestión</h4>
</article>
<img src="https://ericrenardphotography.com/wp-content/uploads/Yosemite_Valley_2861-1-400x400.jpg" alt="">
</div>
</div>
</div>
body {
font-family: 'Raleway', sans-serif;
background-color: #8186a3;
}
.contenedor {
height: 100%;
padding: 5% 0;
}
h1 {
color: #FCFBFA;
}
.container_foto {
background-color: rgba(57, 62, 93, 0.7);
padding: 0;
overflow: hidden;
max-width: 350px;
margin: 5px;
}
.container_foto article {
padding: 10%;
position: absolute;
bottom: 0;
z-index: 1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.container_foto h2 {
color: #fff;
font-weight: 800;
font-size: 25px;
border-bottom: #fff solid 1px;
}
.container_foto h4 {
font-weight: 300;
color: #fff;
font-size: 16px;
}
.container_foto img {
width: 100%;
top: 0;
left: 0;
opacity: 0.4;
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-o-transition: all 4s ease;
-ms-transition: all 4s ease;
transition: all 4s ease;
}
.ver_mas {
background-color: #FEB66C;
position: absolute;
width: 100%;
height: 70px;
bottom: 0;
z-index: 1;
opacity: 0;
transform: translate(0px, 70px);
-webkit-transform: translate(0px, 70px);
-moz-transform: translate(0px, 70px);
-o-transform: translate(0px, 70px);
-ms-transform: translate(0px, 70px);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.ver_mas span {
font-size: 40px;
color: #fff;
position: relative;
margin: 0 auto;
width: 100%;
top: 13px;
}
/*hovers*/
.container_foto:hover {
cursor: pointer;
}
.container_foto:hover img {
opacity: 0.1;
transform: scale(1.5);
}
.container_foto:hover article {
transform: translate(2px, -69px);
-webkit-transform: translate(2px, -69px);
-moz-transform: translate(2px, -69px);
-o-transform: translate(2px, -69px);
-ms-transform: translate(2px, -69px);
}
.container_foto:hover .ver_mas {
transform: translate(0px, 0px);
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
opacity: 1;
}