JSFiddle - React, Tailwind, and code Playground

by abdollahpor

HTML

<center>
<div class="kpnu-csc">
<img src="http://kpnu-csc.ir/css/1.png">
<p style="background:#0CF; width:200px;border-radius:5px;">انجمن کامپیوتر پیام نور کاشمر</p>
</div>
</center>

CSS

.kpnu-csc {
    width:200px;
    line-height: 0px;
    color: transparent;
    font-size: 15px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    font-family:tahoma;    
}
 
.kpnu-csc:hover {
    line-height: 30px;
    color: black;

}
.kpnu-csc span { opacity:0;     -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}
.kpnu-csc:hover span { opacity:1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}