0

Buen día. Estoy intentando hacer una transición con el siguiente código, para que se muevan lento al momento de aparecer, pero no me funciona. Mi código es el siguiente.

  <head>
      <style type="text/css">
   .circulo1{
  display: inline-block;
  border-radius: 50%;
  background:blue;
  height: 200px;
  width: 200px;
  vertical-align: middle;
  text-align: center;
  color: blue ;
  background-image: url("img/mision.jpg");
   background-size: 100% 100%; 
  background-position: center;
  background-repeat: no-repeat;
      overflow: hidden;


}
.circulo1:hover{
      transition: width 10s ease-in; 


}
 .mh{
  display: none;
}
.circulo1:hover + .mh{
  display: inline-block;

  transition: width 10s ease-in-out;
}
     </style>
 </head>

mi html es el siguiente

   <div class="col-sm-4 circulo1 "><h3 class="my-2"><br><br><br>
  <strong>Misi&oacute;n</strong></h3><p class="mh" >Hacer la 
   transici&oacute;n</p></div>

Si alguien me pudiera ayudar, no se en que me falla al momento de que se muevan. Gracias

2
  • Sería mejor para ayudarte que subieras el html, pero a primera vista veo que no alteras en ningún momento el width, por lo que si no lo cambias no habrá transición
    – asantana o
    Commented el 14 oct. 2017 a las 19:49
  • me podrías decir como lo puedo alterar, porque aun no se como Commented el 14 oct. 2017 a las 23:27

1 respuesta 1

2

Estas definiendo la animacion de la manera equivocado. Primero debes de definir la regla transition con la propiedad a animar, duración y tipo de transition y cuando se haga :hover sobre el elemento, la animacion tomara efecto.

div{
  width:100px;
  height:100px;
  background:blue;
  transition: width 3s ease-in;
}

div:hover{
  width:200px;
}
<div>
</div>

Fijate como primero se define las reglas de la transition y luego al hacer :hover se aplica la animacion sobre las propiedades con la animación aplicada. En tu caso tenias definido la animación cuando se hacia :hover sobre elemento lo que era erróneo.

No se si esto es lo que quieres pero aquí tienes un ejemplo modificado de tu codigo con una animacion aplicada:

.circulo1{
  display: inline-block;
  border-radius: 50%;
  background:blue;
  height: 200px;
  width: 200px;
  vertical-align: middle;
  text-align: center;
  color: blue ;
  background-image: url("img/mision.jpg");
  background-size: 100% 100%; 
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  transition: width 10s ease-in;
}
.circulo1:hover{
  width:300px;
}
.mh{
  opacity:0;
  transition: opacity 10s ease-in;
  transition: width 10s ease-in;
  width:200px;
  background:yellow;
}
.circulo1:hover  .mh{
  opacity:1;
  width:300px;
}
   <div class="col-sm-4 circulo1 "><h3 class="my-2"><br><br><br>
  <strong>Misi&oacute;n</strong></h3>
  <p class="mh" >Hacer la 
   transici&oacute;n</p></div>

1
  • Gracias, era lo que necesitaba Commented el 15 oct. 2017 a las 17: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.