Zoomy Anchor Thing

Developer
Chris Burnell
Size
2,680 Kb
Views
34,408
  1. Zoomy Anchor Thing Previews
  2. Zoomy Anchor Thing HTML Codes
  3. Zoomy Anchor Thing CSS Codes

How do I make an zoomy anchor thing?

Inspired by Square: https://squareup.com#verticals. What is a zoomy anchor thing? How do you make a zoomy anchor thing? This script and codes were developed by Chris Burnell on 16 September 2022, Friday.

Zoomy Anchor Thing Previews
IQ Test

Zoomy Anchor Thing - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Zoomy Anchor Thing</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a href="#" title="Let’s Look Back - Article on chrisburnell.com" class="article-link"> <img src="//chrisburnell.com/images/banners/lets-look-back_mobile.png" alt=""> <span class="article-title">Let’s Look Back</span> <time class="article-date" datetime="2014-02-09T02:19:00+00:00">Feb 09, 2014</time>
</a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Zoomy Anchor Thing - Script Codes CSS Codes

html,
body { height: 100%; position: relative;
}
.article-link { background-clip: padding-box; 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 0.1em 0.25em rgba(0, 0, 0, 0.5); border-radius: .375em; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
}
.article-link img { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%) scale(0.85); transform: translateX(-50%) translateY(-50%) scale(0.85); -webkit-transition: all .3s ease; transition: all .3s ease;
}
.article-link:hover img, .article-link:focus img { -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
}
.article-title,
.article-date { position: absolute; top: 50%; left: 50%; white-space: nowrap;
}
.article-title { display: block; font-size: 2em; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-transition: all .3s ease; transition: all .3s ease;
}
.article-link:hover .article-title, .article-link:focus .article-title { -webkit-transform: translateX(-50%) translateY(calc(-50% - .5em)); transform: translateX(-50%) translateY(calc(-50% - .5em));
}
.article-date { opacity: 0; font-size: 1.25em; text-transform: uppercase; -webkit-transform: translateX(-50%) translateY(calc(-50% + 1.8em)); transform: translateX(-50%) translateY(calc(-50% + 1.8em)); -webkit-transition: all .3s ease; transition: all .3s ease;
}
.article-link:hover .article-date, .article-link:focus .article-date { opacity: 1; -webkit-transform: translateX(-50%) translateY(calc(-50% + .8em)); transform: translateX(-50%) translateY(calc(-50% + .8em)); -webkit-transition: all .25s ease .05s; transition: all .25s ease .05s;
}
Zoomy Anchor Thing - Script Codes
Zoomy Anchor Thing - Script Codes
Home Page Home
Developer Chris Burnell
Username chrisburnell
Uploaded September 16, 2022
Rating 4.5
Size 2,680 Kb
Views 34,408
Do you need developer help for Zoomy Anchor Thing?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Burnell (chrisburnell) Script Codes
Name
Simple CSS Checkbox
Message Types
Persistent Light Source Transform
Interesting Hover Animation
Psychedelic Slice
Modal Container without JS
Cutaway Indicator
Stupid RTL Demo
Simple CSS Checkbox
Student Charter Demo for City University
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!