$(document).ready(function(e) {
$(".view").click(function(e) {
$(this).next(".dettales_perfil").addClass('activado');
});
$(".cerrar_perfil").click(function(e) {
$(this).nextparent(".dettales_perfil").removeClass('activado');
});
});
.profile {
position: relative;
width: 300px;
height: 450px;
background-color: #FFFFFF;
box-sizing: border-box;
border: 1px solid #D3D3D3;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 20px 20px rgba(0, 0, 0, .2);
}
.profile img {
max-width: 100%;
}
.profile .view {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
margin: 0;
padding: 5px 10px;
background-color: #59B548;
color: #FFFFFF;
border-radius: 15px;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
font-size: 12px;
}
.dettales_perfil {
height: 50%;
width: 100%;
background-color: #FFFFFF;
position: absolute;
bottom: 30px;
text-align: center;
padding: 20px;
box-sizing: border-box;
transition: .5s;
transform-origin: bottom;
transform: perspective(500px) scale(0);
}
.dettales_perfil.activado {
bottom: 0;
transform: perspective(500px) scale(1);
}
.dettales_perfil h2 {
margin: 0;
padding: 0;
color: #607D8B;
font-size: 18px;
text-transform: uppercase;
}
.dettales_perfil h2 span {
font-size: 14px;
color: #CCCCCC;
}
.dettales_perfil p {
margin: 0;
padding: 10px 0 0;
color: #AAAAAA;
}
.cerrar_perfil {
font-size: 20px;
position: absolute;
top: 5%;
right: 5%;
color: #F00;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="profile">
<img src="../imagenes/lili.jpg" alt="Foto">
<label class="view">Ver perfil</label>
<div class="dettales_perfil">
<h2>Famoso<br><span>Cargo</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo illum, eum temporibus cupiditate vel facere esse sed, ut porro quae explicabo inventore incidunt et, deserunt repellendus non officia tenetur animi!</p>
<div class="cerrar_perfil"><i class="fa fa-times-circle"></i></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="profile">
<img src="../imagenes/lili.jpg" alt="Foto">
<label class="view">Ver perfil</label>
<div class="dettales_perfil">
<h2>Famoso<br><span>Cargo</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo illum, eum temporibus cupiditate vel facere esse sed, ut porro quae explicabo inventore incidunt et, deserunt repellendus non officia tenetur animi!</p>
<div class="cerrar_perfil"><i class="fa fa-times-circle"></i></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="profile">
<img src="../imagenes/lili.jpg" alt="Foto">
<label class="view">Ver perfil</label>
<div class="dettales_perfil">
<h2>Famoso<br><span>Cargo</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo illum, eum temporibus cupiditate vel facere esse sed, ut porro quae explicabo inventore incidunt et, deserunt repellendus non officia tenetur animi!</p>
<div class="cerrar_perfil"><i class="fa fa-times-circle"></i></div>
</div>
</div>
</div>
</div>