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
-
1Recuerda poner el código de lo que has echo, así te podemos ayudar mejor.– ayaleilCommented 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– Web.DesignerCommented 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– ayaleilCommented el 20 may. 2022 a las 20:03
-
Perfecto! gracias– Web.DesignerCommented 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.– DjCrazyCommented el 21 may. 2022 a las 20:10
|
Mostrar 1 comentario más
2 respuestas
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>
-
-
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.– DjCrazyCommented el 24 may. 2022 a las 3:40
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>
-
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