div.perro { position: relative; top: 50px; transition: top 2s ease-out; } span { visibility: hidden; transition: visibility 0; } div.gato:hover + div.perro { top: 0; } div.gato:hover + div.perro span { visibility: visible; transition: visibility 0 2s; } /* nada importante */ div { padding: 10px; background: #dda0dd; } div.perro { background: #adff2f; }
<div class="gato">Miauuu (traducción: "¡que viene el perro!")</div> <div class="perro">Wof wof <span>(traducción: ¡te pillé!)</span> </div>