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ón</strong></h3><p class="mh" >Hacer la
transición</p></div>
Si alguien me pudiera ayudar, no se en que me falla al momento de que se muevan. Gracias