hacer - Las transiciones de desplazamiento de CSS no funcionan

transition css hover

Question

Tengo problemas para obtener cualquier forma de transición en este vuelo estacionario. Quiero que parezca un poco más lento que abruptamente al pasar sobre él. Entonces tal vez solo un retraso? O una facilidad? De todos modos, parece que no puedo hacer que ninguna de estas cosas funcione.

.forum-image {
float: left;
width: 75%;
overflow: auto;
position: relative;
opacity: 1;
transition: opacity 0.3 ease-in;
-webkit-transition: opacity 0.3 ease-in;
background-color: #dcdcdc;
}

.forum-image:hover .descriptionbox {
visibility: visible;
}

.descriptionbox {
opacity: 0.8;
background-color: #FFF;
width: 100%;
height: 100%;
visibility: hidden;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
padding: 10px;
}

<div class="forum-image">
  <img src="http://i.imgur.com/VwTgk9a.png">
    <div class="descriptionbox">
      Testtesttest
    </div>
</div>

Answer 1

En lugar de usar "visibilidad: oculto", intente cambiar solo la opacidad, así:

.forum-image:hover .descriptionbox {
    opacity: 0.8;
}

Y luego coloque el código de transición en el cuadro de descripción:

.descriptionbox {
    /* Other properties... */
    padding: 10px;
    opacity: 0; /* Start opacity at 0, changes when hovered... */
    transition: opacity 0.3s ease-in;
}

Ahora el cuadro de descripción tiene la propiedad de transición, y cuando la imagen está suspendida, se aplica la nueva opacidad (con el tiempo de transición establecido en la clase original). Luego esa nueva clase de opacidad se elimina cuando el mouse sale del área.

Asegúrate de eliminar

visibility: hidden;

del código original, ¡o nunca verás nada! (Esto me fastidió al principio cuando estaba tratando de arreglarlo)

Aquí hay un JSfiddle para demostración

Answer 2

.forum-image {
    position: relative;
    display: inline-block;
}

.descriptionbox {
    position: absolute;
    background: #ffffff;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    
    -webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
    transition: opacity 1s;
}

.descriptionbox:hover {
    opacity: 1;    
}

<div class="forum-image">
    <img src="http://i.imgur.com/VwTgk9a.png" />
    <div class="descriptionbox">
        Testtesttest
    </div>
</div>