Учебник о том, как создавать различные интересные эффекты при наведении курсора с переходами CSS и 3D-поворотами.
По материалам сайта http://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/
Пример 1
Заголовок
текст ссылка
.ch-item {
width: 200px;
height: 200px;background:blue;
border-radius: 50%;
overflow: hidden;
position: relative;
cursor: default;
box-shadow:
inset 0 0 0 16px rgba(255,255,255,0.6),
0 1px 2px rgba(0,0,0,0.1);
transition: all 0.4s ease-in-out;
}
.ch-info {
position: absolute;
background: rgba(63,147,147, 0.8);
width: inherit;
height: inherit;
border-radius: 50%;
overflow: hidden;
opacity: 0;
transition: all 0.4s ease-in-out;
transform: scale(0);
text-align:center;
}
.ch-info h3 {
color: #fff;
margin: 40px 0 0 0 !important;
}
.ch-info p {
color: #fff;
margin: 5px 30px !important;
font-style: italic;
border-top: 1px solid rgba(255,255,255,0.5);
opacity: 0;
transition: all 1s ease-in-out 0.4s;
}
.ch-item:hover {
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.1),
0 1px 2px rgba(0,0,0,0.1);
}
.ch-item:hover .ch-info {
transform: scale(1);
opacity: 1;
}
.ch-item:hover .ch-info p {
opacity: 1;
}
<div> class="ch-item">
<div> class="ch-info">
<h3>Заголовок</h3>
<p>текст</p>
</div>
</div>