أكتوبر 2018

.grid { position: relative; clear: both; margin: 0 auto; padding: 1em 0 4em; max-width: 1000px; list-style: none; text-align: center; } /* Common style */ .grid figure { position: relative; float: left; overflow: hidden; margin: 10px 1%; min-width: 320px; max-width: 480px; max-height: 360px; width: 48%; height: auto; background: #3085a3; text-align: center; cursor: pointer; } .grid figure img { position: relative; display: block; min-height: 100%; max-width: 100%; opacity: 0.8; } .grid figure figcaption { padding: 2em; color: #fff; /* text-transform: uppercase; */ font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .grid figure figcaption::before, .grid figure figcaption::after { pointer-events: none; } .grid figure figcaption, .grid figure figcaption > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Anchor will cover the whole item by default */ /* For some effects it will show as a button */ .grid figure figcaption > a { z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0; } .grid figure h3 { word-spacing: -0.15em; font-weight: 250; } .grid figure h3 span { font-weight: 800; } .grid figure h3, .grid figure p { margin: 0; } .grid figure p { letter-spacing: 1px; font-size: 68.5%; } /*-----------------*/ /***** Steve *****/ /*-----------------*/ figure.effect-steve { z-index: auto; overflow: visible; background: #000; } figure.effect-steve:before, figure.effect-steve h3:before { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background: #000; content: ''; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; } figure.effect-steve:before { box-shadow: 0 3px 30px rgba(0,0,0,0.8); opacity: 0; } figure.effect-steve figcaption { z-index: 1; } figure.effect-steve img { opacity: 1; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: perspective(1000px) translate3d(0,0,0); transform: perspective(1000px) translate3d(0,0,0); } figure.effect-steve h3, figure.effect-steve p { background: #fff; color: #2d434e; } figure.effect-steve h3 { position: relative; margin-top: 6em; padding: 0.25em; } figure.effect-steve h3:before { box-shadow: 0 1px 10px rgba(0,0,0,0.5); } figure.effect-steve p { margin-top: 1em; padding: 0.5em; font-weight: 800; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale3d(0.9,0.9,1); transform: scale3d(0.9,0.9,1); } figure.effect-steve:hover:before { opacity: 1; } figure.effect-steve:hover img { -webkit-transform: perspective(1000px) translate3d(0,0,21px); transform: perspective(1000px) translate3d(0,0,21px); } figure.effect-steve:hover h3:before { opacity: 0; } figure.effect-steve:hover p { opacity: 1; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); } Центр творчества ЮУрГУ: 20 лет успеха и ярких событий! Подробнее Подробнее Международный научный совет ЮУрГУ 31 мая – 1 июня 2019 года Подробнее 75 лет ЮУрГУ: от механико-машиностроительного института к университету цифровых трансформаций 10-15 декабря 2018 Подробнее 75 лет ЮУрГУ: от ЧММИ до университета цифровых трансформаций 10-15 декабря 2018 Подробнее Цифровая индустрия: состояние и перспективы развития – 2018 13-15 ноября 2018 Подробнее ЮУрГУ: новая модель успешной карьеры Подробнее Подробнее Наш кампус: живи и учись с комфортом! Подробнее Подробнее Форум ректоров вузов России и Казахстана 08 ноября 2017 Подробнее Ассоциация иностранных выпускников ЮУрГУ объявляет конкурс! 11 сентября 2018 Подробнее Программа профессиональной переподготовки «Политический консалтинг и менеджмент» 05 октября 2018 Подробнее #ЛУЧШЕЕЛЕТО 60 солнечных лет: СОК ЮУрГУ «Непряхино» отметит юбилей 14 сентября 2018 Подробнее