Greyscale Magnifying glass effect

Developer
Hugo DarbyBrown
Size
2,590 Kb
Views
66,792
  1. Greyscale Magnifying glass effect Previews
  2. Greyscale Magnifying glass effect HTML Codes
  3. Greyscale Magnifying glass effect CSS Codes
  4. Greyscale Magnifying glass effect JS Codes

How do I make an greyscale magnifying glass effect?

What is a greyscale magnifying glass effect? How do you make a greyscale magnifying glass effect? This script and codes were developed by Hugo DarbyBrown on 09 August 2022, Tuesday.

Greyscale Magnifying glass effect Previews
IQ Test

Greyscale Magnifying glass effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Greyscale Magnifying glass effect</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="map"></div>
<div class="mag"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Greyscale Magnifying glass effect - Script Codes CSS Codes

body { overflow: hidden;
}
.map { background: url("http://www.bbc.co.uk/london/travel/downloads/tube_map.gif") no-repeat; background-attachment: fixed; background-size: 100%; height: 100%; position: absolute; width: 100%; -webkit-filter: blur(2px) grayscale(100%) sepia(10%); filter: blur(2px) grayscale(100%) sepia(10%);
}
.mag { background: url("http://www.bbc.co.uk/london/travel/downloads/tube_map.gif") no-repeat; background-attachment: fixed; background-size: 100%; border-radius: 50%; border: 0.5em solid white; box-shadow: 0 0 50px rgba(17, 17, 17, 0.8), inset 0 0 4px rgba(17, 17, 17, 0.4); cursor: all-scroll; left: 50%; height: 15em; margin: -7.5em 0 0 -7.5em; overflow: hidden; position: absolute; top: 50%; width: 15em;
}
.mag:after { background: -webkit-linear-gradient(#ffffff, rgba(0, 0, 0, 0)); background: linear-gradient(#ffffff, rgba(0, 0, 0, 0)); border-radius: 50%; content: ''; height: 50%; left: 10%; position: absolute; top: 5%; width: 80%;
}

Greyscale Magnifying glass effect - Script Codes JS Codes

$(".mag").draggable();
// Thanks BBC for the map :)
Greyscale Magnifying glass effect - Script Codes
Greyscale Magnifying glass effect - Script Codes
Home Page Home
Developer Hugo DarbyBrown
Username hugo
Uploaded August 09, 2022
Rating 4.5
Size 2,590 Kb
Views 66,792
Do you need developer help for Greyscale Magnifying glass effect?

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!

Hugo DarbyBrown (hugo) Script Codes
Name
LunchBreak Sassing
Sass Solar system
YAUI v2
Iron Man Login Form
Shop Talk logo made in CSS
Slide Icon Menu
SCSS version of Meta Fizzy
DNA Double Helix
Concept mobile navigation
Zocial Buttons
Create amazing love letters 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!