C opacity и transition: all .2s;
вот что получилось за 5 мин. HTML and CSS
код не обдуман!
<div class="wrap">
<div class="img-wrap">
<img src="https://rvm.io/images/rvm-logo-all-happy.png"/>
<div class="pop">
<div class="pop-img">
<img src="https://rvm.io/images/rvm-logo-all-happy.png"/>
<h3>RVM</h3>
</div>
<div class="desc">
<p>RVM is a command-line tool which allows you to easily install</p>
</div>
</div>
</div>
<h2>Ruby on Rails</h2>
</div>
.wrap {
text-align: center;
width: 150px;
height: 150px;
float: left;
margin-right: 20px;
}
img {
max-width: 100%;
}
.img-wrap {
position: relative;
width: 150px;
height: 150px;
border-radius: 100%;
background-color: #efefef;
text-align: center;
}
.wrap img {
width: 100%;
height: auto;
}
.pop {
position: absolute;
top: -210px;
left: 0;
width: 300px;
height: 150px;
display: none;
background-color: #efefef;
padding: 20px 10px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
.pop:after {
content: '';
position: absolute;
left: 65px;
bottom: -20px;
border: 10px solid transparent;
border-top: 10px solid #efefef;
}
.wrap:hover .pop {
display: block;
}
.pop-img {
width: 100px;
height:100px;
border-radius: 100%;
background-color: #fff;
float: left;
}
.desc {
padding: 0 10px;
float: left;
width: 180px;
}