Zoomy Anchor Thing
This code demo was published on .
It’s JS Naked Day!
I’m participating in JS Naked Day with the hope of helping to promote the rule of least power
. This means that your browsing experience on this website during the 50 hours that make up JS Naked Day should be identical to one where you have disabled JavaScript in your browser.
This is an excellent exercise in making sure there is a clear separation of concerns between HTML for markup, CSS for styling, and JavaScript for interactivity. I highly recommend trying it out and participating yourself!
Sorry, this code snippet failed to load, but you can still check it out over on CodePen!
<a href="#" class="article-link">
<img src="/images/banners/lets-look-back_mobile.png" alt="A photograph of a line hiker on a path in the forest with steep cliffs reaching upwards on either side">
<span class="article-title">Let’s Look Back</span>
<time datetime="2014-02-09T02:19:00+00:00" class="article-date">Feb 09, 2014</time>
</a>html,
body {
height: 100%;
position: relative;
}
.article-link {
color: white;
width: 425px;
height: 255px;
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
font: 600 16px/2em sans-serif;
text-decoration: none;
text-shadow: 0 .1em .25em rgba(black, .5);
border-radius: .375em;
transform: translate3d(-50%, -50%, 0);
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0) scale(0.85);
transition: all .3s ease;
}
&:hover img,
&:focus img {
transform: translate3d(-50%, -50%, 0);
}
}
.article-title,
.article-date {
position: absolute;
top: 50%;
left: 50%;
white-space: nowrap;
}
.article-title {
display: block;
font-size: 2em;
transform: translate3d(-50%, -50%, 0);
transition: all .3s ease;
.article-link:hover &,
.article-link:focus & {
transform: translate3d(-50%, calc(-50% - .5em), 0);
}
}
.article-date {
opacity: 0;
font-size: 1.25em;
text-transform: uppercase;
transform: translate3d(-50%, calc(-50% + 1.8em), 0);
transition: all .3s ease;
.article-link:hover &,
.article-link:focus & {
opacity: 1;
transform: translate3d(-50%, calc(-50% + .8em), 0);
transition: all .25s ease .05s;
}
}