<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;
}
Run Pen

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
  2. https://fonts.googleapis.com/css?family=Raleway:300,400,800
  3. https://cdn.linearicons.com/free/1.0.0/icon-font.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js