Annotation Test

Developer
Todd Moy
Size
2,431 Kb
Views
14,168
  1. Annotation Test Previews
  2. Annotation Test HTML Codes
  3. Annotation Test CSS Codes
  4. Annotation Test JS Codes

How do I make an annotation test?

A concept for overlaid annotations. . What is a annotation test? How do you make a annotation test? This script and codes were developed by Todd Moy on 14 October 2022, Friday.

Annotation Test Previews
IQ Test

Annotation Test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Annotation Test</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <figure> <img src="http://www.fillmurray.com/g/600/700"> <figcaption> <span style="left: 20px; top: 20px">12</span> <span style="left: 120px; top: 200px">1</span> <span style="left: 500px; top: 400px">999</span> </figcaption> </figure>
</div> <script src="js/index.js"></script>
</body>
</html>

Annotation Test - Script Codes CSS Codes

body { background-color: #e74c3c;
}
.wrapper { width: 600px; margin: 50px auto;
}
figure { position: relative;
}
figcaption { position: absolute; left: 0; top: 0;
}
figcaption span { position: relative; display: block; width: 30px; height: 30px; text-align: center; font-family: sans-serif; border-radius: 20px; overflow: hidden; line-height: 30px; font-size: 11px; border: solid #fff 3px; color: #fff; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5); transition: all 0.3s;
}
figcaption span:hover { cursor: pointer; background-color: #c0392b;
}

Annotation Test - Script Codes JS Codes

// A concept for overlaid annotations.
Annotation Test - Script Codes
Annotation Test - Script Codes
Home Page Home
Developer Todd Moy
Username toddmoy
Uploaded October 14, 2022
Rating 3
Size 2,431 Kb
Views 14,168
Do you need developer help for Annotation Test?

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!

Todd Moy (toddmoy) Script Codes
Name
Chrome Store Copy
Header Test
Loader 5
Hidden Menu Test
Subscribe Button
Menu Test
Flexbox test
Logo Animation
SVG Animation Test
Experiment
Create amazing web content 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!