Oycheungad (Talk | contribs) |
Oycheungad (Talk | contribs) |
||
Line 362: | Line 362: | ||
</div> | </div> | ||
− | <h1> | + | <div class="spacing"> |
+ | </div> | ||
+ | |||
+ | <h1> Our Advisors </h1> | ||
<figure class="snip1477"> | <figure class="snip1477"> | ||
Line 532: | Line 535: | ||
padding: 30px; | padding: 30px; | ||
} | } | ||
+ | |||
+ | @import url(https://fonts.googleapis.com/css?family=Raleway:400,500,700); | ||
+ | @import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css); | ||
+ | figure.snip1477 { | ||
+ | font-family: 'Raleway', Arial, sans-serif; | ||
+ | position: relative; | ||
+ | float: left; | ||
+ | overflow: hidden; | ||
+ | margin: 10px 1%; | ||
+ | min-width: 230px; | ||
+ | max-width: 315px; | ||
+ | width: 100%; | ||
+ | color: #ffffff; | ||
+ | text-align: center; | ||
+ | font-size: 16px; | ||
+ | background-color: #000000; | ||
+ | } | ||
+ | figure.snip1477 *, | ||
+ | figure.snip1477 *:before, | ||
+ | figure.snip1477 *:after { | ||
+ | -webkit-box-sizing: border-box; | ||
+ | box-sizing: border-box; | ||
+ | -webkit-transition: all 0.55s ease; | ||
+ | transition: all 0.55s ease; | ||
+ | } | ||
+ | figure.snip1477 img { | ||
+ | max-width: 100%; | ||
+ | backface-visibility: hidden; | ||
+ | vertical-align: top; | ||
+ | opacity: 0.9; | ||
+ | } | ||
+ | figure.snip1477 .title { | ||
+ | position: absolute; | ||
+ | top: 58%; | ||
+ | left: 25px; | ||
+ | padding: 5px 10px 10px; | ||
+ | } | ||
+ | figure.snip1477 .title:before, | ||
+ | figure.snip1477 .title:after { | ||
+ | height: 2px; | ||
+ | width: 400px; | ||
+ | position: absolute; | ||
+ | content: ''; | ||
+ | background-color: #ffffff; | ||
+ | } | ||
+ | figure.snip1477 .title:before { | ||
+ | top: 0; | ||
+ | left: 10px; | ||
+ | -webkit-transform: translateX(100%); | ||
+ | transform: translateX(100%); | ||
+ | } | ||
+ | figure.snip1477 .title:after { | ||
+ | bottom: 0; | ||
+ | right: 10px; | ||
+ | -webkit-transform: translateX(-100%); | ||
+ | transform: translateX(-100%); | ||
+ | } | ||
+ | figure.snip1477 .title div:before, | ||
+ | figure.snip1477 .title div:after { | ||
+ | width: 2px; | ||
+ | height: 300px; | ||
+ | position: absolute; | ||
+ | content: ''; | ||
+ | background-color: #ffffff; | ||
+ | } | ||
+ | figure.snip1477 .title div:before { | ||
+ | top: 10px; | ||
+ | right: 0; | ||
+ | -webkit-transform: translateY(100%); | ||
+ | transform: translateY(100%); | ||
+ | } | ||
+ | figure.snip1477 .title div:after { | ||
+ | bottom: 10px; | ||
+ | left: 0; | ||
+ | -webkit-transform: translateY(-100%); | ||
+ | transform: translateY(-100%); | ||
+ | } | ||
+ | figure.snip1477 h2, | ||
+ | figure.snip1477 h4 { | ||
+ | margin: 0; | ||
+ | text-transform: uppercase; | ||
+ | } | ||
+ | figure.snip1477 h2 { | ||
+ | font-weight: 400; | ||
+ | } | ||
+ | figure.snip1477 h4 { | ||
+ | display: block; | ||
+ | font-weight: 700; | ||
+ | background-color: #ffffff; | ||
+ | padding: 5px 10px; | ||
+ | color: #000000; | ||
+ | } | ||
+ | figure.snip1477 figcaption { | ||
+ | position: absolute; | ||
+ | bottom: 42%; | ||
+ | left: 25px; | ||
+ | text-align: left; | ||
+ | opacity: 0; | ||
+ | padding: 5px 60px 5px 10px; | ||
+ | font-size: 0.8em; | ||
+ | font-weight: 500; | ||
+ | letter-spacing: 1.5px; | ||
+ | } | ||
+ | figure.snip1477 figcaption p { | ||
+ | margin: 0; | ||
+ | } | ||
+ | figure.snip1477 a { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | bottom: 0; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | } | ||
+ | figure.snip1477:hover img, | ||
+ | figure.snip1477.hover img { | ||
+ | zoom: 1; | ||
+ | filter: alpha(opacity=35); | ||
+ | -webkit-opacity: 0.35; | ||
+ | opacity: 0.35; | ||
+ | } | ||
+ | figure.snip1477:hover .title:before, | ||
+ | figure.snip1477.hover .title:before, | ||
+ | figure.snip1477:hover .title:after, | ||
+ | figure.snip1477.hover .title:after, | ||
+ | figure.snip1477:hover .title div:before, | ||
+ | figure.snip1477.hover .title div:before, | ||
+ | figure.snip1477:hover .title div:after, | ||
+ | figure.snip1477.hover .title div:after { | ||
+ | -webkit-transform: translate(0, 0); | ||
+ | transform: translate(0, 0); | ||
+ | } | ||
+ | figure.snip1477:hover .title:before, | ||
+ | figure.snip1477.hover .title:before, | ||
+ | figure.snip1477:hover .title:after, | ||
+ | figure.snip1477.hover .title:after { | ||
+ | -webkit-transition-delay: 0.15s; | ||
+ | transition-delay: 0.15s; | ||
+ | } | ||
+ | figure.snip1477:hover figcaption, | ||
+ | figure.snip1477.hover figcaption { | ||
+ | opacity: 1; | ||
+ | -webkit-transition-delay: 0.2s; | ||
+ | transition-delay: 0.2s; | ||
+ | } | ||
+ | /* Demo purposes only */ | ||
+ | body { | ||
+ | background-color: #212121; | ||
+ | } | ||
+ | |||
</style> | </style> | ||
</html> | </html> | ||
{{Hong_Kong_HKUST/Footer}} | {{Hong_Kong_HKUST/Footer}} |
Revision as of 07:42, 28 September 2017
Our Advisors