JSFiddle - React, Tailwind, and code Playground

by abdollahpor

HTML

<div class="bumpupvbiranparssoft">
<img src="http://kpnu-csc.ir/css/1.png" />
<img src="http://kpnu-csc.ir/css/1.png" />
<img src="http://kpnu-csc.ir/css/1.png" />
</div>

CSS

.bumpupvbiranparssoft img{

     float:left; 
     margin: 30px; /*این عدد دلخواهه و جاشو مشخص میکنه */
     transition: margin 0.5s ; /* حالت برگشت به صورت انیمیشنی میشه */
    -webkit-transition: margin 0.5s; /* حالت برگشت به صورت انیمیشنی میشه */
    -moz-transition: margin 0.5s ; /* حالت برگشت به صورت انیمیشنی میشه */
    -o-transition: margin 0.5s ; /* حالت برگشت به صورت انیمیشنی میشه */
}

.bumpupvbiranparssoft img:hover {
    margin-top: 2px; /* وقتی موس بیاد رو عکس یکم بره بالا */
    transition: margin 0.5s ; /* حالت رفت به صورت انیمیشنی میشه*/
    -webkit-transition: margin 0.5s ;/* حالت رفت به صورت انیمیشنی میشه*/
    -moz-transition: margin 0.5s ;/* حالت رفت به صورت انیمیشنی میشه*/
    -o-transition: margin 0.5s ;/* حالت رفت به صورت انیمیشنی میشه*/
}