Учебник о том, как создавать различные интересные эффекты при наведении курсора с переходами 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>