Ease from 1 div to show another - html

Question

I'm having trouble using the ease function in CSS.
I have an image and when you hover over it I want it to ease to get bigger and show another div.
<div class="info1">
<img src="info.png">
<div class="infoh">
<p>Information to be shown when hovered over</p>
</div>
</div>
The CSS
.infoh {
width: 180px;
height: 180px;
display: none;
position: absolute;
background-color: #ffb534;
padding: 30px;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border: 4px solid #ffffff;
z-index: 1;
margin-left: -80px;
margin-top: -33px;
}
.infoh p {
font-size: inherit;
text-align: center;
}
.info1:hover .infoh {
display: block;
}
.info1 {
position: absolute;
display: inline-block;
width: 32px;
height: 32px;
margin-left: 19.5%;
margin-top: -1.5%
}
I tried placing it on the image but that didn't work, then I tried on each div, and couldn't get it to ease. It just pops up.
.info1 img {
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
transition-timing-function: ease;
-webkit-transition-timing-function: ease;
}

Answer 1

I'm not exactly sure of the effect you're after, but as #Paulie_D said, you're probably looking at using visibility and opacity.
Here's some code to try out, and at least that should give you something to work with.
(I also changed the order of your HTML a bit)
.info1 {
position: absolute;
display: inline-block;
width: 32px;
height: 32px;
}
.info1 img {
width: 32px;
height: 32px;
-webkit-transition: all 2s; /* Safari */
transition: all 2s;
transition-timing-function: ease;
-webkit-transition-timing-function: ease;
}
.infoh {
position: absolute;
visibility: hidden;
opacity: 0;
z-index: 1;
width: 180px;
height: 180px;
background-color: #ffb534;
padding: 30px;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border: 4px solid #ffffff;
-webkit-transition: all 1s; /*Safari*/
transition: all 1s;
}
.infoh p {
font-size: inherit;
text-align: center;
}
.info1:hover img {
width: 300px;
height: 300px;
}
.info1:hover .infoh {
visibility: visible;
opacity: 1;
-webkit-transition-delay: 1s; /*Safari*/
transition-delay: 1s;
}
<div class="info1">
<div class="infoh">
<p>Information to be shown when hovered over</p>
</div>
<img src="https://unsplash.it/300/300">
</div>
Hope this helps, and good luck!