أبريل 2023

.grid { position: relative; margin: 0 auto; padding: 1em 0 3em; 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%; background: #3085a3; text-align: center; cursor: pointer; } .grid figure img { position: relative; display: block; min-height: 100%; max-width: 100%; opacity: 0.1; } .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 { color: #fff; font-weight: 500; } .grid figure h3 span { font-weight: 500; } .grid figure h3, .grid figure p { margin: 0; } .grid figure p { font-size: 68.5%; } /*---------------*/ /***** Honey *****/ /*---------------*/ figure.effect-honey { background: #4a3753; } figure.effect-honey img { opacity: 0.6; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; } figure.effect-honey:hover img { opacity: 0.8; } figure.effect-honey figcaption::before { position: absolute; bottom: 0; left: 0; width: 100%; height: 10px; background: #004394; content: ''; -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); } figure.effect-honey h3 { position: absolute; bottom: 0; left: 0; padding: 1em 1.5em; width: 100%; text-align: left; -webkit-transform: translate3d(0,-30px,0); transform: translate3d(0,-30px,0); } figure.effect-honey h3 i { font-style: normal; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(0,-30px,0); transform: translate3d(0,-30px,0); } figure.effect-honey figcaption::before, figure.effect-honey h3 { -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; } figure.effect-honey:hover figcaption::before, figure.effect-honey:hover h3, figure.effect-honey:hover h3 i { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); Сделай правильный выбор: в ЮУрГУ прошел День открытых дверей More ЮУрГУ рассказал о правилах приема на 2023 год More ЮУрГУ рассказал о правилах приема в колледж More