Skip to content

Instantly share code, notes, and snippets.



Created Feb 14, 2017
What would you like to do?
Link Preview Prototype
<p>It is possible to use <a href="#">JavaScript</a> <span class="linkpreview">
<img src="" alt>Web Developer Reading List: JavaScript
</span> and several image files to achieve this, at the cost of swapping multiple image files back and forth over a potentially weak and thin wireless connection. The <a href="#">&lt;picture&gt;</a> <span class="linkpreview">
<img src="" alt>Responsive Images For Designers: The HTML5 picture element</span>element achieves the same result, at the expense of bandwidth.</p>
<p>In an ideal world we would have an image format that integrated “dynamic crop marks”, allowing a single source image to adapt to different requirements while preserving its central focus. While we don’t have such a feature yet, we do have SVG’s <a href="#">viewBox attribute</a><span class="linkpreview">
<span><img src="" alt></span><span>Understanding the SVG viewBox</span></span>, which comes awfully close.</p>
<p>While it is best known as a vector image format, SVG has supported bitmaps from its inception:</p>
@font-face {
font-family: 'Libertad';
src: url('') format('woff2');
font-style: normal;
font-weight: 400;
@font-face {
font-family: 'Libertad';
src: url('') format('woff2');
font-style: italic;
font-weight: 400;
* {
box-sizing: border-box;
body {
font-family: Libertad, Avenir, sans-serif;
line-height: 1.6;
color: rgba(0,0,0,0.8);
margin-bottom: 4rem;
article {
width: 90%;
max-width: 700px;
margin: 0 auto;
font-size: 1.3rem;
article p {
position: relative;
.linkpreview {
top: 0;
opacity: 0;
transition: .2s;
position: absolute;
left: 100%;
min-height: 100%;
width: 10rem;
border-left: 6px solid #2F8BCA;
margin-left: 2rem;
font-style: italic;
display: flex;
flex-direction: column;
font-size: 1rem;
padding: 1rem;
.linkpreview img {
border-radius: 50%;
width: 80%;
margin-bottom: 1rem;
article p a {
color: currentColor;
.linkpreview img {
width: 100%;
a[href="#"]:hover {
color: #2F8BCA;
a:hover + .linkpreview {
opacity: 1;
@media all and (max-width: 1100px) {
.linkpreview { display: none; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.