Oycheungad (Talk | contribs) |
Oycheungad (Talk | contribs) |
||
Line 371: | Line 371: | ||
<div class="spacing"></div> | <div class="spacing"></div> | ||
<div class="gallery"> | <div class="gallery"> | ||
− | |||
<figure> | <figure> | ||
<img src="https://static.igem.org/mediawiki/2017/6/6d/Hkusteric.png" alt="" /> | <img src="https://static.igem.org/mediawiki/2017/6/6d/Hkusteric.png" alt="" /> | ||
Line 424: | Line 423: | ||
<figcaption>Highlands <small>United States</small></figcaption> | <figcaption>Highlands <small>United States</small></figcaption> | ||
</figure> | </figure> | ||
− | |||
</div> | </div> | ||
Line 655: | Line 653: | ||
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; | 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%; | width: 100%; | ||
height: 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; | 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: 0px; | ||
+ | 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; | display: block; | ||
+ | text-transform: uppercase; | ||
+ | margin-top: 12px; | ||
+ | text-indent: 3px; | ||
+ | opacity: .7; | ||
+ | letter-spacing: 1px; | ||
+ | } | ||
+ | .popup figure .shadow { | ||
position: relative; | position: relative; | ||
− | + | z-index: 1; | |
− | + | top: -15px; | |
− | + | margin: 0 auto; | |
− | + | background-position: center bottom; | |
− | - | + | background-repeat: no-repeat; |
− | + | width: 98%; | |
− | -webkit- | + | 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> |
Revision as of 14:14, 3 October 2017
Our Advisors