JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<body>
<div class="imgWrap">
<img src="1.png" alt="polaroid" />
<p class="imgDescription">يادداشت ها</p></div>

</body>
</html>

CSS

.imgWrap {
margin:100px auto;
position: relative;
height: 100px;
width: 70px;
transition: margin 300ms ,;
-moz-transition: width 2s;
-webkit-transition: margin 1s , height 1s;
-o-transition: margin 300ms;
}
.imgDescription {
position: fixed;
height: 20px;
width: 75px;
top: 34px;
padding-top:55px;
color: #000;
font-family: Adobe Arabic;
font-size: 17pt;
visibility: visible;
opacity: 0;
/*remove comment if you want a gradual transition between states
-webkit-transition: visibility opacity 0.2s;
*/
}
.imgDescription:hover {
visibility: visible;
opacity: 1;
}
.imgWrap:hover {
visibility: visible;
opacity: 1;
margin-top:85px;
}