Image with inset shadow
How do I make an image with inset shadow?
What is a image with inset shadow? How do you make a image with inset shadow? This script and codes were developed by Keith Pickering on 10 August 2022, Wednesday.
Image with inset shadow - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Image with inset shadow</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { padding: 50px;
}
.img--shadow { display: inline-block; position: relative;
}
.img--shadow:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.5); transition: box-shadow 250ms;
}
.img--shadow > img { display: block;
}
.img--shadow:hover:before { box-shadow: inset 0 12px 24px rgba(0, 0, 0, 0.75);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="img--shadow"> <img src="http://i.imgur.com/wRP3sID.jpg" alt="">
</div>
<!-- Image from lorempixel.com --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Image with inset shadow - Script Codes CSS Codes
body { padding: 50px;
}
.img--shadow { display: inline-block; position: relative;
}
.img--shadow:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.5); transition: box-shadow 250ms;
}
.img--shadow > img { display: block;
}
.img--shadow:hover:before { box-shadow: inset 0 12px 24px rgba(0, 0, 0, 0.75);
}
Developer | Keith Pickering |
Username | keithpickering |
Uploaded | August 10, 2022 |
Rating | 3 |
Size | 2,311 Kb |
Views | 32,384 |
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!
Name | Size |
Reusable Styles | 11,486 Kb |
Text Inputs with Sliding Labels | 2,892 Kb |
Sliding Navigation Menu | 3,440 Kb |
Material Inspired Menu | 4,237 Kb |
Metro Interactive Live Tiles | 5,953 Kb |
Easy Container-Breaking Sidebar | 4,673 Kb |
Lovely Transforming Menu Button | 11,445 Kb |
Delicious SASS Buttons | 8,496 Kb |
A Pen by Keith Pickering | 12,023 Kb |
Windows 10 Concept | 16,180 Kb |
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!
Name | Username | Size |
Mega Menu by Joni | Asakasinsky | 3,171 Kb |
Loading... | Adamjacob | 2,384 Kb |
Sass random color animation | Jotavejv | 4,827 Kb |
CLE_Old_March | Saritaleroux | 6,234 Kb |
Brown by pure CSS, no image, no javascript | Aaronchuo | 2,652 Kb |
Css3 loader | Clknap | 2,391 Kb |
CSS Variables | Jdsteinbach | 4,759 Kb |
A Pen by Theun | Tjoen | 6,152 Kb |
Arrow Navigation | Hinducows | 1,973 Kb |
Degree Picker | Idered | 4,307 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!