0

tengo entendido que hay el :hover añadiendo una animacion al pasar el ratón por encima del elemento deseado ( junto con animation y transition..etc). Queria saber si al sacar el raton del elemento podria hacerse una animacion reversal. Por ejemplo tengo un botón y hago que al pasar el ratón se haga mas grande en 0.5s, entonces y al sacar el raton queda una "transicion" muy cortada para q vuelva a su estado original y lo que yo quisiera es que al sacar el ratón se pueda hacer esa transicion de 0.5s pero en reversa y no quede tan seco al sacar el ratón

6
  • 1
    Recuerda poner el código de lo que has echo, así te podemos ayudar mejor.
    – ayaleil
    Commented el 20 may. 2022 a las 19:53
  • exactamente aqui no se necesitaba codigo, es una situación en general, no hay un codigo en especifico Commented el 20 may. 2022 a las 20:01
  • entonces usa mouseenter - mouseover y mouseleave - mouseout. es.stackoverflow.com/questions/535333/… asi le agregas las clases y puedes hacer las animaciones que necesitas
    – ayaleil
    Commented el 20 may. 2022 a las 20:03
  • Perfecto! gracias Commented el 20 may. 2022 a las 20:09
  • Aunque sea una "situación en general", es recomendable que agregues algo de código a tu pregunta para seguir las normas de la comunidad. En caso contrario, tu preguntase cierra y deja de recibir respuestas. Pásate por acá para que comprendas de lo que hablo.
    – DjCrazy
    Commented el 21 may. 2022 a las 20:10

2 respuestas 2

2

Si es posible lograrlo sin JS usando las propiedades transition de CSS.

Este es un ejemplo de un efecto overlay tomado de https://codepen.io/ArnaudBalland/pen/vGZKLr

En el ejemplo, para transition: all 0.4s ease-in-out 0s; tenemos:

  • transition-property (all): Indica que se aplicarán todas las propiedades declaradas
  • transition-duration (0.4s): Indica que la transición durará 0.4 segundos
  • transition-timing-function (ease-in-out): Indica que la transición será lenta al inicio y al final
  • transition-delay (0s): Indica que el número de segundos antes de iniciar la transición es cero

@import url(https://fonts.googleapis.com/css?family=Raleway);
*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #f9f9f9;
  font-size: 16px;
  font-family: 'Raleway', sans-serif;
}

.container {
  padding: 1em 0;
  float: left;
  width: 50%;
}

@media screen and (max-width: 640px) {
  .container {
    display: block;
    width: 100%;
  }
}

@media screen and (min-width: 900px) {
  .container {
    width: 33.33333%;
  }
}

.container {
  color: #1a1a1a;
  text-align: center;
  margin-bottom: 10px;
}

.content {
  position: relative;
  width: 90%;
  max-width: 400px;
  margin: auto;
  overflow: hidden;
}

.content .content-overlay {
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  height: 99%;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.content:hover .content-overlay {
  opacity: 1;
}

.content-image {
  width: 100%;
}

.content-details {
  position: absolute;
  text-align: center;
  padding-left: 1em;
  padding-right: 1em;
  width: 100%;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.content:hover .content-details {
  top: 50%;
  left: 50%;
  opacity: 1;
}

.content-details h3 {
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.15em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}

.content-details p {
  color: #fff;
  font-size: 0.8em;
}

.fadeIn-bottom {
  top: 80%;
}
<div class="container">
  <div class="content">
    <a href="https://unsplash.com/photos/HkTMcmlMOUQ" target="_blank">
      <div class="content-overlay"></div>
      <img class="content-image" src="https://images.unsplash.com/photo-1433360405326-e50f909805b3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=359e8e12304ffa04a38627a157fc3362">
      <div class="content-details fadeIn-bottom">
        <h3 class="content-title">This is a title</h3>
        <p class="content-text">This is a short description</p>
      </div>
    </a>
  </div>
</div>

En este otro ejemplo, tenemos una trancisión que cambia el color de fondo y agrega la propiedad border-radius al div.

Nótese que al "sacar el mouse", el div retoma su forma original en la misma fracción de tiempo que se transformó al principio. Siendo este el ejemplo más claro para tu pregunta

#propiedades {
  height: 100px;
  width: 100px;
  background-color: #ff0000;
  transition-property: background-color, border-radius;
  transition-duration: 3s;
}
#propiedades:hover {
  background-color: #0000ff;
  border-radius: 75px;
}
<div id="propiedades"></div>

2
  • oh wow, perfecto muchas gracias Commented el 22 may. 2022 a las 9:46
  • Si la respuesta cumple tus expectativas, te sugiero aceptarla y darle un voto positivo. De esta manera ambos ganamos reputación en la comunidad y servirá de referencia para futuros visitantes que tengan una duda igual o similar.
    – DjCrazy
    Commented el 24 may. 2022 a las 3:40
0

Mira lo puedes hacer así con esto cambias el tamaño como quieras

function change() {
            document.querySelector(".cuadro").classList.remove("aumentar");
    }
    
        function change2() {
    document.querySelector(".cuadro").classList.add("aumentar");
    }
.cuadro{
  background: red;
  height:100px;
  transition: width .5s;
  width:100px;
}

.aumentar{
  width:250px;
}
<div class="cuadro" onmouseover="change2()" onmouseout=change()></div>

1
  • Gracias! creeo que eso se puede aplicar a cualquier elemento que quiera tener ese efecto? y no pensaba q necesitaria JS xd venia en busca de solo html y css, pero veo que con cosas asi la programación es inevitable Commented el 21 may. 2022 a las 9:44

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.