Приголомшливі ефекти css3 при наведенні

class="Main"gt;lt;ul class="Ch-grid"gt;lt;ligt;lt;div class="Ch-item ch-img-1"gt;lt;div class="Ch-info"gt;lt;h3gt; Текст 1lt;/h3gt;lt;/divgt;lt;/divgt;lt;/ligt; ...lt;/ulgt;lt;/sectiongt;

.ch-item {width: 100%-height: 100%-border-radius: 50%-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)--webkit-transition: all 0.4s ease-in-out--moz-transition: all 0.4s ease-in-out--o-transition: all 0.4s ease-in-out--ms-transition: all 0.4s ease-in-out-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%-opacity: 0--webkit-transition: all 0.4s ease-in-out--moz-transition: all 0.4s ease-in-out--o-transition: all 0.4s ease-in-out--ms-transition: all 0.4s ease-in-out-transition: all 0.4s ease-in-out--webkit-transform: scale(0)--moz-transform: scale(0)--o-transform: scale(0)--ms-transform: scale(0)-transform: scale(0)--webkit-backface-visibility: hidden-}.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 {width: 100%-height: 100%-border-radius: 50%-position: relative-cursor: default-box-shadow:inset 0 0 0 0 rgba(200,95,66, 0.4),inset 0 0 0 16px rgba(255,255,255,0.6),0 1px 2px rgba(0,0,0,0.1)--webkit-transition: all 0.4s ease-in-out--moz-transition: all 0.4s ease-in-out--o-transition: all 0.4s ease-in-out--ms-transition: all 0.4s ease-in-out-transition: all 0.4s ease-in-out-}.ch-item: hover {box-shadow:inset 0 0 0 110px rgba(200,95,66, 0.4),inset 0 0 0 16px rgba(255,255,255,0.8),0 1px 2px rgba(0,0,0,0.1)-}

class="Main"gt;lt;ul class="Ch-grid"gt;lt;ligt;lt;div class="Ch-item"gt;lt;div class="Ch-info"gt;lt;h3gt; Текстlt;/h3gt;lt;/divgt;lt;div class="Ch-thumb ch-img-1"gt; lt;/divgt;lt;/divgt;lt;/ligt; ...lt;/ulgt;lt;/sectiongt;

.ch-item {width: 100%-height: 100%-border-radius: 50%-position: relative-cursor: default-box-shadow: 0 1px 3px rgba(0,0,0,0.2)-}.ch-thumb {width: 100%-height: 100%-border-radius: 50%-overflow: hidden-position: absolute-box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5)--webkit-transform-origin: 95% 40%--moz-transform-origin: 95% 40%--o-transform-origin: 95% 40%--ms-transform-origin: 95% 40%-transform-origin: 95% 40%--webkit-transition: all 0.3s ease-in-out--moz-transition: all 0.3s ease-in-out--o-transition: all 0.3s ease-in-out--ms-transition: all 0.3s ease-in-out-transition: all 0.3s ease-in-out-}.ch-thumb: after {content: ``-width: 8px-height: 8px-position: absolute-border-radius: 50%-top: 40%-left: 95%-margin: -4px 0 0 -4px-background: rgb(14,14,14)-background: -moz-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%, rgba(125,126,125,1) 100%)-background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(14,14,14,1)), color-stop(100%,rgba(125,126,125,1)))-background: -webkit-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%)-background: -o-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%)-background: -ms-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%)-background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%)-box-shadow: 0 0 1px rgba(255,255,255,0.9)-}.ch-info {position: absolute-width: 100%-height: 100%-border-radius: 50%-overflow: hidden-background: # c9512e url(../images/noise.jpg)-box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05)-}.ch-item: hover .ch-thumb {box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2)--webkit-transform: rotate(-110deg)--moz-transform: rotate(-110deg)--o-transform: rotate(-110deg)--ms-transform: rotate(-110deg)-transform: rotate(-110deg)-}

class="Main"gt;lt;ul class="Ch-grid"gt;lt;ligt;lt;div class="Ch-item ch-img-1"gt;lt;div class="Ch-info-wrap"gt;lt;div class="Ch-info"gt;lt;div class="Ch-info-front ch-img-1"gt; lt;/divgt;lt;div class="Ch-info-back"gt;lt;h3gt; Текст 1lt;/h3gt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/divgt;lt;/ligt; ...lt;/ulgt;lt;/sectiongt;

.ch-info-wrap {position: absolute-width: 180px-height: 180px-border-radius: 50%--webkit-perspective: 800px--moz-perspective: 800px--o-perspective: 800px--ms-perspective: 800px-perspective: 800px--webkit-transition: all 0.4s ease-in-out--moz-transition: all 0.4s ease-in-out--o-transition: all 0.4s ease-in-out--ms-transition: all 0.4s ease-in-out-transition: all 0.4s ease-in-out-top: 20px-left: 20px-background: # f9f9f9 url(../images/bg.jpg)-box-shadow:0 0 0 20px rgba(255,255,255,0.2),inset 0 0 3px rgba(115,114, 23, 0.8)-}.ch-info {position: absolute-width: 180px-height: 180px-border-radius: 50%--webkit-transition: all 0.4s ease-in-out--moz-transition: all 0.4s ease-in-out--o-transition: all 0.4s ease-in-out--ms-transition: all 0.4s ease-in-out-transition: all 0.4s ease-in-out--webkit-transform-style: preserve-3d--moz-transform-style: preserve-3d--o-transform-style: preserve-3d--ms-transform-style: preserve-3d-transform-style: preserve-3d-}.ch-info gt; div {display: block-position: absolute-width: 100%-height: 100%-border-radius: 50%-background-position: center center--webkit-backface-visibility: hidden--moz-backface-visibility: hidden--o-backface-visibility: hidden--ms-backface-visibility: hidden-backface-visibility: hidden-}.ch-info .ch-info-back {-webkit-transform: rotate3d(0,1,0,180deg)--moz-transform: rotate3d(0,1,0,180deg)--o-transform: rotate3d(0,1,0,180deg)--ms-transform: rotate3d(0,1,0,180deg)-transform: rotate3d(0,1,0,180deg)-background: # 000-}.ch-item: hover .ch-info-wrap {box-shadow:0 0 0 0 rgba(255,255,255,0.8),inset 0 0 3px rgba(115,114, 23, 0.8)-}.ch-item: hover .ch-info {-webkit-transform: rotate3d(0,1,0,-180deg)--moz-transform: rotate3d(0,1,0,-180deg)--o-transform: rotate3d(0,1,0,-180deg)--ms-transform: rotate3d(0,1,0,-180deg)-transform: rotate3d(0,1,0,-180deg)-}

.ch-info-wrap {top: 20px-left: 20px-background: # f9f9f9 url(../images/bg.jpg)-box-shadow:0 0 0 20px rgba(255,255,255,0.2),inset 0 0 3px rgba(115,114, 23, 0.8)-}.ch-info gt; div {display: block-position: absolute-width: 100%-height: 100%-border-radius: 50%-background-position: center center--webkit-backface-visibility: hidden-}.ch-info .ch-info-front {-webkit-transition: all 0.6s ease-in-out--moz-transition: all 0.6s ease-in-out--o-transition: all 0.6s ease-in-out--ms-transition: all 0.6s ease-in-out-transition: all 0.6s ease-in-out-}.ch-info .ch-info-back {opacity: 0-background:Поділися в соц мережах: 
Cхоже
Красиві таблиці на css + відео
Css3 генератор анімації - автоматизуємо створення анімації + відео
Як красиво оформити посилання
Як створити перенесення слів css - абзаци з перенесенням слів css
Як зробити пошук по сайту - робимо гарний пошук по сайту
Глибокий аналіз серпів - serp explorer
Гарне оформлення списків на css3
Ефекти кнопок соціальних мереж для сайту
Креативні блоки з анімацією на css
Друга частина секретних властивостей css3 - властивості css3
Гарне оформлення сайту - оформляємо красиво, утворять єдиний сайт
Набір ефектів при наведенні css - зображення при наведенні css
Оригінальний ефект css3 при наведенні на
Css3 меню в стилі мінімалізм
Урок 5. Посилання. Частина 2
Випадає горизонтальне меню з пошуком на css3 і html5
Чудова інтерактивна 3d модель
Анімація за допомогою css перетворень. Частина 3 - просунута анімація
Css анімовані підказки
Css3 бібліотека - 40+ ефектів при наведенні

Увага, тільки СЬОГОДНІ!