0

Como puedo agregar animación en la parte que contiene el titulo cuando se hace hover sobre la Tarjeta.

Inicialmente no se muestra el titulo, pero al hacer hover sobre la tarjeta, este debe subir con una animación, actualmente se mustra repentinamente, solo se logra ver la animación al ocultarse. Le he agregado transition: all 500ms ease-in-out pero como que no lo toma...

let companyInforHeight = $('.company-info').outerHeight() + 20;
companyInforHeight = '-' + companyInforHeight + 'px';
$('.company-info').css({top: companyInforHeight});
@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
* {
  font-family: "Lato", sans-serif;
}

.post-item1 {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fff;
  overflow: hidden;
  position: relative;
  width: 100%;
  border-radius: 20px;
  box-shadow: 0px 13px 27px -5px rgba(0, 0, 0, 0.25);
  margin-top: 50px;
  height: auto;
  display: flex;
  flex-flow: column;
  max-width: 338px;
  min-height: 422px;
  max-height: 422px;
  transition: all 400ms ease-in-out;
}
.post-item1::before {
  content: "";
  width: 100%;
  height: 60%;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
}
.post-item1 .post-thumbnail {
  width: 100%;
  height: 100%;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: gray;
  min-height: 100%;
  padding-bottom: 125%;
  transition: all 400ms ease-in-out;
}
.post-item1 .post-thumbnail::before {
  content: "";
  width: 100%;
  height: 60%;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
}
.post-item1 .post-info {
  padding: 19px 21px;
  margin-top: auto;
  margin-bottom: 0;
  position: relative;
  top: 100%;
  transition: position 400ms ease-in-out;
  background: white;
}
.post-item1 .post-info .company-info {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 90%;
  transition: all 400ms ease-in-out;
  height: fit-content;
}
.post-item1 .post-info .company-info__logo {
  width: 100%;
  max-width: 60px;
  min-width: 60px;
  height: 60px;
  border-radius: 50px;
  background-color: #fff;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  margin-right: 15px;
}
.post-item1 .post-info .company-info h3 {
  color: #fff;
  margin: 0;
  line-height: 24px;
  letter-spacing: 0.38px;
  font-weight: 700;
  font-size: 24px;
}
.post-item1 .post-info h3 {
  font-weight: 700;
  color: #000;
  line-height: 29px;
  letter-spacing: 0.2px;
  font-size: 24px;
  margin-bottom: 20px;
  margin-top: 0;
}
.post-item1 .post-info .post-info__arrow-link {
  display: flex;
  align-items: center;
}
.post-item1 .post-info .post-info__arrow-link h5 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.38px;
  color: royalblue;
  margin-right: 10px;
  margin-top: 0;
  margin-bottom: 0;
}
.post-item1 .post-info .post-info__arrow-link:hover h5 {
  text-decoration: underline;
}
.post-item1:hover .post-thumbnail {
  padding-bottom: 86%;
}
@media (max-width: 1999px) {
  .post-item1:hover .post-thumbnail {
    padding-bottom: 90%;
  }
}
.post-item1:hover .post-info {
  top: auto;
  position: absolute;
  bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="post-item1">
    <div class="post-thumbnail" style="background-image: url(https://media-exp1.licdn.com/dms/image/C561BAQFI5wJjW5WlTg/company-background_10000/0?e=2159024400&v=beta&t=SYZsgalRv78KV0nCa9Xf_e5yAL6de8hKAwnHiP5THzU);">
        
    </div><!--post-thumbnail-->
    <div class="post-info">
        <div class="company-info">
            <div class="company-info__logo" style="background-color:gray;"></div>
            <h3 style="color: white">Company Name</h3>
        </div><!--company-info-->
        <h3 class="post-title">Titulo del post Lorem ipsum dolor sit amet consectur
</h3>
        <span class="post-info__arrow-link">
            <h5>Read their story</h5>
        </span>
    </div><!--post-info-->
</div>

<br>

Cuando esa parte del texto está oculto, tiene estilos:

.post-info {
  padding: 19px 21px;
  margin-top: auto;
  margin-bottom: 0;
  position: relative;
  top: 100%;
  transition: position 400ms ease-in-out;
  background: white;
}

al hacer hover en la tarjeta, la clase .post-info tiene:

.post-info {
  top: auto;
  position: absolute;
  bottom: 0;
}

Estuve pensando que no toma la animación porque cambia de position:relative a position:absolute pero no sé como solucionarlo... Lo intenté hacer con jquery utilizando .animate() pero no tengo permitido usar esa función. (El código jQuery no tiene nada que ver en la animación, es solo para que se logre ver 'Company Name' en la tarjeta.) Alguien podría ayudarme porfavor!!!

4
  • Bueno según veo tienes razón en decir que la animación no se aplica por el uso de position:relative. En el ultimo bloque donde tienes .post-item1:hover .post-info { intenta comentando position: absolute;
    – Israel-ICM
    el 2 jun. 2021 a las 18:05
  • Aunque también dependerá si quieres agregar algo más o necesites que si o si la posición sea absoluta en el bloque .post-info
    – Israel-ICM
    el 2 jun. 2021 a las 18:06
  • Comenté position:absolute, sube con la animación pero no se muestra completa esa parte.
    – JoseFranc
    el 2 jun. 2021 a las 18:16
  • Yo le agregué position:aboslute en hover porque de esa forma si se muestra completo pero entonces no funciona la animación.
    – JoseFranc
    el 2 jun. 2021 a las 18:17

1 respuesta 1

1

Estuve viendo y haciendo algunas pruebas y, aquí falta algo de conocimiento de las funciones de las transiciones. Yo hice tres cambios y funcionó de maravilla.

Primero hay que saber que, un contenedor div padre debe ser relative, para que todos sus hijos sean respetuosos. Segundo, cuando se oculta algo del padre, debe ser absolute (casi no le domina el padre); pero este hijo estando siempre ahí, solo hay que sacarlo fuera de vista del padre.

Lo que hice con post-info fue darle position: absolute, pero que salga fuera del área visible: button: -40% (para que se vea el título); y lo más importante: transition: all:

.post-item1 .post-info {
  padding: 19px 21px;
  margin-top: auto;
  margin-bottom: 0;
  position: absolute;
  bottom: -40%;
  transition: all 400ms ease-in-out;
 background: white;
}

Y vaya, que transición suave y hermoso. Espero que entiendas y te ayude este pequeño cambio.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.