Skip to main content
se añadieron 19 caracteres en el cuerpo
Origen Enlace

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>

 
<body>

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

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>

 
<body>
   <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

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

Origen Enlace

No puedo hacer la transición de div y p

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>


<body>
   <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