Oycheungad (Talk | contribs) |
Oycheungad (Talk | contribs) |
||
Line 371: | Line 371: | ||
<div class="spacing"></div> | <div class="spacing"></div> | ||
<div class="gallery"> | <div class="gallery"> | ||
+ | <div class="hovereffect"> | ||
<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 423: | Line 424: | ||
<figcaption>Highlands <small>United States</small></figcaption> | <figcaption>Highlands <small>United States</small></figcaption> | ||
</figure> | </figure> | ||
+ | </div> | ||
</div> | </div> | ||
Line 653: | Line 655: | ||
transition: all .5s ease-in-out; | transition: all .5s ease-in-out; | ||
} | } | ||
− | + | ||
− | + | .hovereffect { | |
− | + | width: 100%; | |
− | + | height: 100%; | |
− | . | + | float: left; |
− | + | ||
− | + | ||
− | + | ||
overflow: hidden; | overflow: hidden; | ||
− | + | position: relative; | |
− | + | text-align: center; | |
− | + | cursor: default; | |
− | + | background: #42b078; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | . | + | .hovereffect .overlay { |
− | + | ||
− | + | ||
− | + | ||
− | . | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
position: absolute; | position: absolute; | ||
− | + | overflow: hidden; | |
− | + | top: 0; | |
− | + | left: 0; | |
− | + | padding: 50px 20px; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | . | + | |
− | + | .hovereffect img { | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
display: block; | display: block; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
position: relative; | position: relative; | ||
− | + | max-width: none; | |
− | + | width: calc(100% + 20px); | |
− | + | -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; | |
− | + | transition: opacity 0.35s, transform 0.35s; | |
− | + | -webkit-transform: translate3d(-10px,0,0); | |
− | + | transform: translate3d(-10px,0,0); | |
− | + | -webkit-backface-visibility: hidden; | |
− | + | backface-visibility: hidden; | |
− | -webkit- | + | |
− | + | ||
} | } | ||
− | . | + | |
− | + | .hovereffect:hover img { | |
− | + | opacity: 0.4; | |
− | + | filter: alpha(opacity=40); | |
− | + | -webkit-transform: translate3d(0,0,0); | |
− | + | transform: translate3d(0,0,0); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
</style> | </style> | ||
<script> | <script> |
Revision as of 14:12, 3 October 2017
Our Advisors