Quiero mostrar un contenido en un elemento de columna DIV (un icono y algún texto del título). Cuando flaco sobre el texto, estoy tratando de ocultar el contenido haciendo la transición de un cuadro sobre el contenido antiguo, muestre más información en la parte superior de la nueva coloración

Actualmente estoy usando el elemento: Antes de la transición de PSUEDO para transitar un nuevo color de fondo que inicialmente es de 0 opacidad, entonces la transición hacia arriba y a la opacidad completa. No puedo parecer que mi hijo DIV se muestre en la parte superior.

.feature {
  position: relative;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 5%;
  text-align: center;
  box-sizing: border-box;
}

.feature h2 {
  font-size: 1.5em;
  color: #006699;
  margin-top: 0;
  margin-bottom: 0.5em;
}

.feature a {
  text-decoration: none;
}

.feature .icon {
  font-size: 3em;
  color: #575757;
}

.feature:before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 0;
  background-color: #003366;
  transition: all 0.33s ease;
  z-index: 10;
}

.feature .details {
  display: none;
  z-index: 15;
}

.feature:hover:before {
  height: 100%;
  opacity: 1;
  box-shadow: inset 0px 0px 2px 2px rgba(75, 179, 219, 0.75);
  z-index: 10;
}

.features:hover .details {
  display: block;
  color: #fff;
}
<div class="feature h_medium bg-gray radius-2">
  <div class="icon mb-15">
    <i class="fas fa-people-carry"></i>
  </div>
  <h2>Main Title</h2>
  <div class="details">
    <h2>Main Title (again)</h2>
    <p>Some level of content that describes the title</p>
  </div>
</div>

La identificación espera que el flujo de la cubierta de la caja azul sea la cubierta de la caja azul sobre el elemento de la característica, entonces esperaría que los detalles divagan sobre la caja azul

1
Alex DiCaprio 13 jul. 2019 a las 07:03

1 respuesta

La mejor respuesta

Aquí está mi solución para usted. Espero que cumpla con sus requisitos. Acabo de hacer algunos cambios en los siguientes bloques. Siéntase libre de informar si enfrenta algún problema.

.feature .details {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display:block;
    opacity: 0;
    z-index: 15;
}

.feature:hover .details {
    opacity: 1;
    transition: all 0.33s ease .2s;
} 
.feature {
    position: relative;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    padding: 5%;
    text-align: center;
    box-sizing: border-box;
}

.feature h2 {
    font-size: 1.5em;
    color: #006699;
    margin-top: 0;
    margin-bottom: 0.5em;
}

.feature a {
    text-decoration: none;
}

.feature .icon {
    font-size: 3em;
    color: #575757;
}

.feature:before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 0;
    background-color: #003366;
    transition: all 0.33s ease;
    z-index: 10;
}

.feature .details {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display:block;
    opacity: 0;
    z-index: 15;
}

.feature:hover:before {
    height: 100%;
    opacity: 1;
    box-shadow: inset 0px 0px 2px 2px rgba(75,179,219,0.75);
    z-index: 10;
}

.feature:hover .details {
    opacity: 1;
    transition: all 0.33s ease .2s;
}
<div class="feature h_medium bg-gray radius-2">
        <div class="icon mb-15">
            <i class="fas fa-people-carry"></i>
        </div>
        <h2>Main Title</h2>
        <div class="details">
            <h2>Main Title (again)</h2>
            <p>Some level of content that describes the title</p>
    </div>
    </div>
3
Showrin Barua 13 jul. 2019 a las 05:02