Oycheungad (Talk | contribs) |
Oycheungad (Talk | contribs) |
||
Line 370: | Line 370: | ||
<h1 class="row"> Our Advisors </h1> | <h1 class="row"> Our Advisors </h1> | ||
<div class="spacing"></div> | <div class="spacing"></div> | ||
+ | <div class="gallery"> | ||
+ | <figure> | ||
+ | <img src="https://images.unsplash.com/photo-1448814100339-234df1d4005d?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" /> | ||
+ | <figcaption>Daytona Beach <small>United States</small></figcaption> | ||
+ | </figure> | ||
+ | <figure> | ||
+ | <img src="https://images.unsplash.com/photo-1443890923422-7819ed4101c0?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" /> | ||
+ | <figcaption>Териберка, gorod Severomorsk <small>Russia</small></figcaption> | ||
+ | </figure> | ||
+ | <figure> | ||
+ | <img src="https://images.unsplash.com/photo-1445964047600-cdbdb873673d?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" /> | ||
+ | <figcaption> | ||
+ | Bad Pyrmont <small>Deutschland</small> | ||
+ | </figcaption> | ||
+ | </figure> | ||
+ | <figure> | ||
+ | <img src="https://images.unsplash.com/photo-1439798060585-62ab242d7724?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" /> | ||
+ | <figcaption>Yellowstone National Park <small>United States</small></figcaption> | ||
+ | </figure> | ||
+ | <figure> | ||
+ | <img src="https://images.unsplash.com/photo-1440339738560-7ea831bf5244?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" /> | ||
+ | <figcaption>Quiraing, Portree <small>United Kingdom</small></figcaption> | ||
+ | </figure> | ||
+ | <figure> | ||
+ | <img src="https://images.unsplash.com/photo-1441906363162-903afd0d3d52?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" /> | ||
+ | <figcaption>Highlands <small>United States</small></figcaption> | ||
+ | </figure> | ||
+ | <figure> | ||
+ | <img src="https://images.unsplash.com/photo-1448814100339-234df1d4005d?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" /> | ||
+ | <figcaption>Daytona Beach <small>United States</small></figcaption> | ||
+ | </figure> | ||
+ | <figure> | ||
+ | <img src="https://images.unsplash.com/photo-1443890923422-7819ed4101c0?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" /> | ||
+ | <figcaption>Териберка, gorod Severomorsk <small>Russia</small></figcaption> | ||
+ | </figure> | ||
+ | <figure> | ||
+ | <img src="https://images.unsplash.com/photo-1445964047600-cdbdb873673d?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" /> | ||
+ | <figcaption> | ||
+ | Bad Pyrmont <small>Deutschland</small> | ||
+ | </figcaption> | ||
+ | </figure> | ||
+ | <figure> | ||
+ | <img src="https://images.unsplash.com/photo-1439798060585-62ab242d7724?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" /> | ||
+ | <figcaption>Yellowstone National Park <small>United States</small></figcaption> | ||
+ | </figure> | ||
+ | <figure> | ||
+ | <img src="https://images.unsplash.com/photo-1440339738560-7ea831bf5244?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" /> | ||
+ | <figcaption>Quiraing, Portree <small>United Kingdom</small></figcaption> | ||
+ | </figure> | ||
+ | <figure> | ||
+ | <img src="https://images.unsplash.com/photo-1441906363162-903afd0d3d52?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" /> | ||
+ | <figcaption>Highlands <small>United States</small></figcaption> | ||
+ | </figure> | ||
+ | </div> | ||
Line 502: | Line 556: | ||
padding: 30px; | padding: 30px; | ||
} | } | ||
+ | //advisor | ||
+ | img { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .gallery { | ||
+ | position: relative; | ||
+ | z-index: 2; | ||
+ | padding: 10px; | ||
+ | display: -webkit-box; | ||
+ | display: -ms-flexbox; | ||
+ | display: flex; | ||
+ | -ms-flex-flow: row wrap; | ||
+ | flex-flow: row wrap; | ||
+ | -webkit-box-pack: justify; | ||
+ | -ms-flex-pack: justify; | ||
+ | justify-content: space-between; | ||
+ | -webkit-transition: all .5s ease-in-out; | ||
+ | transition: all .5s ease-in-out; | ||
+ | } | ||
+ | .gallery.pop { | ||
+ | -webkit-filter: blur(10px); | ||
+ | filter: blur(10px); | ||
+ | } | ||
+ | .gallery figure { | ||
+ | -ms-flex-preferred-size: 33.333%; | ||
+ | flex-basis: 33.333%; | ||
+ | padding: 10px; | ||
+ | overflow: hidden; | ||
+ | border-radius: 10px; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | .gallery figure img { | ||
+ | width: 100%; | ||
+ | border-radius: 10px; | ||
+ | -webkit-transition: all .3s ease-in-out; | ||
+ | transition: all .3s ease-in-out; | ||
+ | } | ||
+ | .gallery figure figcaption { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .popup { | ||
+ | position: fixed; | ||
+ | z-index: 2; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | background: rgba(255, 255, 255, 0.75); | ||
+ | opacity: 0; | ||
+ | -webkit-transition: opacity .5s ease-in-out .2s; | ||
+ | transition: opacity .5s ease-in-out .2s; | ||
+ | } | ||
+ | .popup.pop { | ||
+ | opacity: 1; | ||
+ | -webkit-transition: opacity .2s ease-in-out 0s; | ||
+ | transition: opacity .2s ease-in-out 0s; | ||
+ | } | ||
+ | .popup.pop figure { | ||
+ | margin-top: 0; | ||
+ | opacity: 1; | ||
+ | } | ||
+ | .popup figure { | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | left: 50%; | ||
+ | -webkit-transform: translate(-50%, -50%); | ||
+ | transform: translate(-50%, -50%); | ||
+ | -webkit-transform-origin: 0 0; | ||
+ | transform-origin: 0 0; | ||
+ | margin-top: 30px; | ||
+ | opacity: 0; | ||
+ | -webkit-animation: poppy 500ms linear both; | ||
+ | animation: poppy 500ms linear both; | ||
+ | } | ||
+ | .popup figure img { | ||
+ | position: relative; | ||
+ | z-index: 2; | ||
+ | border-radius: 15px; | ||
+ | box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 6px 30px rgba(0, 0, 0, 0.4); | ||
+ | } | ||
+ | .popup figure figcaption { | ||
+ | position: absolute; | ||
+ | bottom: 50px; | ||
+ | background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.78)); | ||
+ | background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.78)); | ||
+ | z-index: 2; | ||
+ | width: 100%; | ||
+ | border-radius: 0 0 15px 15px; | ||
+ | padding: 100px 20px 20px 20px; | ||
+ | color: #fff; | ||
+ | font-family: 'Open Sans', sans-serif; | ||
+ | font-size: 32px; | ||
+ | } | ||
+ | .popup figure figcaption small { | ||
+ | font-size: 11px; | ||
+ | display: block; | ||
+ | text-transform: uppercase; | ||
+ | margin-top: 12px; | ||
+ | text-indent: 3px; | ||
+ | opacity: .7; | ||
+ | letter-spacing: 1px; | ||
+ | } | ||
+ | .popup figure .shadow { | ||
+ | position: relative; | ||
+ | z-index: 1; | ||
+ | top: -15px; | ||
+ | margin: 0 auto; | ||
+ | background-position: center bottom; | ||
+ | background-repeat: no-repeat; | ||
+ | width: 98%; | ||
+ | height: 50px; | ||
+ | opacity: .6; | ||
+ | -webkit-filter: blur(15px) contrast(2); | ||
+ | filter: blur(15px) contrast(2); | ||
+ | } | ||
+ | .popup .close { | ||
+ | position: absolute; | ||
+ | z-index: 3; | ||
+ | top: 10px; | ||
+ | right: 10px; | ||
+ | width: 25px; | ||
+ | height: 25px; | ||
+ | cursor: pointer; | ||
+ | background: url(#close); | ||
+ | border-radius: 25px; | ||
+ | background: rgba(0, 0, 0, 0.1); | ||
+ | box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); | ||
+ | } | ||
+ | .popup .close svg { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
</style> | </style> | ||
<script> | <script> | ||
Line 510: | Line 699: | ||
} | } | ||
); | ); | ||
+ | |||
+ | //advisor | ||
+ | popup = { | ||
+ | init: function(){ | ||
+ | $('figure').click(function(){ | ||
+ | popup.open($(this)); | ||
+ | }); | ||
+ | |||
+ | $(document).on('click', '.popup img', function(){ | ||
+ | return false; | ||
+ | }).on('click', '.popup', function(){ | ||
+ | popup.close(); | ||
+ | }) | ||
+ | }, | ||
+ | open: function($figure) { | ||
+ | $('.gallery').addClass('pop'); | ||
+ | $popup = $('<div class="popup" />').appendTo($('body')); | ||
+ | $fig = $figure.clone().appendTo($('.popup')); | ||
+ | $bg = $('<div class="bg" />').appendTo($('.popup')); | ||
+ | $close = $('<div class="close"><svg><use xlink:href="#close"></use></svg></div>').appendTo($fig); | ||
+ | $shadow = $('<div class="shadow" />').appendTo($fig); | ||
+ | src = $('img', $fig).attr('src'); | ||
+ | $shadow.css({backgroundImage: 'url(' + src + ')'}); | ||
+ | $bg.css({backgroundImage: 'url(' + src + ')'}); | ||
+ | setTimeout(function(){ | ||
+ | $('.popup').addClass('pop'); | ||
+ | }, 10); | ||
+ | }, | ||
+ | close: function(){ | ||
+ | $('.gallery, .popup').removeClass('pop'); | ||
+ | setTimeout(function(){ | ||
+ | $('.popup').remove() | ||
+ | }, 100); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | popup.init() | ||
</script> | </script> | ||
</html> | </html> | ||
{{Hong_Kong_HKUST/Footer}} | {{Hong_Kong_HKUST/Footer}} |
Revision as of 12:33, 29 September 2017
Our Advisors