Items moving upwards when I use the :hover in css (No javascript) - html

Question

I am trying to create an effect without JavaScript, that when your mouse hovers over the image, where an image enlarges, gets a shadow, then has a transparent div with text inside comes down from the top of the image.
#note {
display: block;
-webkit-transition: -webkit-transform .3s ease-out;
-moz-transition: -moz-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
-ms-transition: -ms-transform .3s ease-out;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
transition: box-shadow 0.3s ease-in-out, transform .3s ease-out;
width: 125px;
height: 175px;
}
#note:hover {
-webkit-box-shadow: 12px 18px 53px 0 rgba(148, 138, 148, 0.81);
-moz-box-shadow: 12px 18px 53px 0 rgba(148, 138, 148, 0.81);
box-shadow: 12px 18px 53px 0 rgba(148, 138, 148, 0.81);
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
width: 125px;
display: block;
width: 125px;
height: 175px;
}
#box1 {
position: absolute;
top: -10px;
left: 15px;
font-size: 15px;
width: 100px;
height: 100px;
}
#text1 {
opacity: 0;
transition: all 0.5s;
width: 100px;
height: 100px;
}
#note:hover #text1 {
opacity: 1;
}
#over {
background-color: grey;
position: relative;
top: 89px;
left: -7px;
width: 125px;
height: 176px;
}
<div id="note">
<img src="http://www.simpleimageresizer.com/_uploads/photos/b8804940/Chick_Pea_Wrap_1_125x175.jpg">
<div id="box1">
<div id="over"></div>
<div id="text1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at lacus leo. Fusce tempus eleifend ligula at bibendum. Proin lacus.
</p>
</div>
</div>
</div>
If you need any more info, please ask. I have searched wide and far for an answer to this question but seems I am new to code I do not know what keywords to type in. Any and all help is appreciated.

Answer 1

Here is a working example that accomplishes what you're asking. I adjusted your HTML and added the necessary CSS and marked the styles /* Added */. I generally just added some positioning to your text container and added another property into the animation.
#note {
display: block;
-webkit-transition: -webkit-transform .3s ease-out;
-moz-transition: -moz-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
-ms-transition: -ms-transform .3s ease-out;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
transition: box-shadow 0.3s ease-in-out, transform .3s ease-out;
width: 125px;
height: 175px;
overflow: hidden; /* Added */
position: relative; /* Added */
}
#note:hover {
-webkit-box-shadow: 12px 18px 53px 0 rgba(148, 138, 148, 0.81);
-moz-box-shadow: 12px 18px 53px 0 rgba(148, 138, 148, 0.81);
box-shadow: 12px 18px 53px 0 rgba(148, 138, 148, 0.81);
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
display: block;
width: 125px;
height: 175px;
}
#text1 {
opacity: 0;
transition: all 0.5s ease 0s;
padding: 10px; /* Added */
width: 125px; /* Added */
height: 175px; /* Added */
position: absolute; /* Added */
bottom: 100%; /* Added */
left: 0px; /* Added */
-webkit-box-sizing: border-box; /* Added */
-moz-box-sizing: border-box; /* Added */
box-sizing: border-box; /* Added */
}
#note:hover #text1 {
opacity: 1;
bottom: 0px; /* Added */
}
<div id="note">
<img src="http://www.simpleimageresizer.com/_uploads/photos/b8804940/Chick_Pea_Wrap_1_125x175.jpg">
<div id="text1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>