<div class="c-homepage-text-hover o-container js-image-hover" data-bkg-theme="base">
<div class="c-homepage-text-hover__content">
<p class="c-homepage-text-hover__text">
The Academy is advancing
<a href="#" class="c-homepage-text-hover__link u-c-teal js-image-hover-link" data-idx="1"><span>research</span></a>,
<a href="#" class="c-homepage-text-hover__link u-c-reef js-image-hover-link" data-idx="2"><span>education</span></a>, and <br>
<a href="#" class="c-homepage-text-hover__link u-c-plum js-image-hover-link" data-idx="3"><span>public engagement</span></a>
in biodiversity and environmental science.
</p>
<a href="#" class="c-homepage-text-hover__cta o-btn o-btn--expanding-arrow f-text--cta">
learn more about our impact
<span class="o-btn__icon" aria-hidden="true"><svg width="31" height="16" viewBox="0 0 31 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="u-cta-arrow">
<path class="u-ct-stroke u-cta-arrow__path" d="M0 8H20M20 8L13 1M20 8L13 15" />
</svg>
</span>
</a>
</div>
<img src="/images/homepage/Home_Dinosaur.png" alt="PLACEHOLDER - Illustration of animal bones" class="c-homepage-text-hover__image js-image-hover-image" data-idx="1" />
<img src="/images/homepage/Home_Crab.png" alt="PLACEHOLDER - Illustration of fish" class="c-homepage-text-hover__image js-image-hover-image" data-idx="2" />
<img src="/images/homepage/Home_Octopus.png" alt="PLACEHOLDER - Illustration of animal bones" class="c-homepage-text-hover__image js-image-hover-image" data-idx="3" />
</div>
<!--hardcoded-->
<div class="c-homepage-text-hover o-container js-image-hover" data-bkg-theme="base">
<div class="c-homepage-text-hover__content">
<p class="c-homepage-text-hover__text">
The Academy is advancing
<a href="#" class="c-homepage-text-hover__link u-c-teal js-image-hover-link" data-idx="1"><span>research</span></a>,
<a href="#" class="c-homepage-text-hover__link u-c-reef js-image-hover-link" data-idx="2"><span>education</span></a>, and <br>
<a href="#" class="c-homepage-text-hover__link u-c-plum js-image-hover-link" data-idx="3"><span>public engagement</span></a>
in biodiversity and environmental science.
</p>
<a href="#" class="c-homepage-text-hover__cta o-btn o-btn--expanding-arrow f-text--cta">
learn more about our impact
<span class="o-btn__icon" aria-hidden="true">{% include "03-icons/cta-expanding-arrow" %}</span>
</a>
</div>
<img src="/images/homepage/Home_Dinosaur.png" alt="PLACEHOLDER - Illustration of animal bones" class="c-homepage-text-hover__image js-image-hover-image" data-idx="1"/>
<img src="/images/homepage/Home_Crab.png" alt="PLACEHOLDER - Illustration of fish" class="c-homepage-text-hover__image js-image-hover-image" data-idx="2"/>
<img src="/images/homepage/Home_Octopus.png" alt="PLACEHOLDER - Illustration of animal bones" class="c-homepage-text-hover__image js-image-hover-image" data-idx="3"/>
</div>
<!--hardcoded-->
{
"pageColorTheme": "teal"
}
.c-homepage-text-hover {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
position: relative;
@include break($sm){
margin: 11.0rem 0 22.1rem;
}
}
.c-homepage-text-hover__content {
position: relative;
z-index: 2;
@include break($sm) {
width: 80%;
}
}
.c-homepage-text-hover__image {
position: absolute;
top: 50%;
right: 0;
max-height: 80vh;
transform: translate3d(-3rem, -50%, 0) scale(0.95);
z-index: 0;
transition: all 0.8s ease-in-out;
opacity: 0;
&.is-active {
transform: translate3d(0, -51%, 0) scale(1);
opacity: 1;
}
}
.c-homepage-text-hover__text {
font-size: 3.2rem;
font-weight: 300;
line-height: 1.28;
margin-bottom: 2rem;
max-width: 97rem;
@include break($sm) {
font-size: 4.8rem;
}
@include break($sm-md) {
font-size: 6.2rem;
}
}
.c-homepage-text-hover__link {
font-weight:700;
text-decoration: none;
span {
@include hoverDrawUnderlineReverse($color: currentColor, $thickness: 0.3rem);
}
}
No notes defined.