Skip to main content
se añadieron 118 caracteres en el cuerpo
Origen Enlace
alanfcm
  • 20.9k
  • 11
  • 19
  • 35
$(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>
$(document).ready(function(e) {

  $(".view").click(function(e) {

    $(this).next(".dettales_perfil").addClass('activado');

  });

  $(".cerrar_perfil").click(function(e) {

    $(this).next(".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>
<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>
$(document).ready(function(e) {

  $(".view").click(function(e) {

    $(this).next(".dettales_perfil").addClass('activado');

  });

  $(".cerrar_perfil").click(function(e) {

    $(this).parent(".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>
Origen Enlace
alanfcm
  • 20.9k
  • 11
  • 19
  • 35

Tu problema es que no estas especificando el contexto. Puedes lograrlo con this y next() asi:

$(document).ready(function(e) {

  $(".view").click(function(e) {

    $(this).next(".dettales_perfil").addClass('activado');

  });

  $(".cerrar_perfil").click(function(e) {

    $(this).next(".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>
<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>