Refract Light Overlay

Developer
Mark Peck
Size
2,181 Kb
Views
22,264
  1. Refract Light Overlay Previews
  2. Refract Light Overlay HTML Codes
  3. Refract Light Overlay CSS Codes
  4. Refract Light Overlay JS Codes

How do I make an refract light overlay?

Just a little experiment. Using jQuery to determine size of image then wrap with the refraction gradient.. What is a refract light overlay? How do you make a refract light overlay? This script and codes were developed by Mark Peck on 13 October 2022, Thursday.

Refract Light Overlay Previews
IQ Test

Refract Light Overlay - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Refract Light Overlay</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<img src="http://placekitten.com/300/300"> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Refract Light Overlay - Script Codes CSS Codes

html { background: #FF6F47;
}
body { padding: 0; margin: 0;
}
.refract_wrap { position: relative; overflow: hidden; box-shadow: 15px 15px 0 #fff; margin: 50px;
}
.refract {
background: -moz-linear-gradient(-45deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.18) 49%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 99%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(49%,rgba(255,255,255,0.18)), color-stop(50%,rgba(255,255,255,0)), color-stop(99%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.18) 49%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 99%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.18) 49%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 99%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.18) 49%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 99%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.18) 49%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 99%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ width: 100%; height: 100%; position: absolute; top: 0; left: 0;
}

Refract Light Overlay - Script Codes JS Codes

var imgHeight = $('img').height();
var imgWidth = $('img').width();
$('img').wrap('<div class="refract_wrap"></div>');
$('.refract_wrap').append('<div class="refract"></div').css({ height: imgHeight, width: imgWidth });
Refract Light Overlay - Script Codes
Refract Light Overlay - Script Codes
Home Page Home
Developer Mark Peck
Username doodlemarks
Uploaded October 13, 2022
Rating 3
Size 2,181 Kb
Views 22,264
Do you need developer help for Refract Light Overlay?

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!

Mark Peck (doodlemarks) Script Codes
Name
Subtle Wiggle Animation
Bootstrap Styleguide
JQuery UI Draggable Experiment
3D Styled CSS Browser Mockup
Very Simple Slider
Crown Loader Animation
Colors
Automated Browser Mockup
Basic line animation vivus
Simple Accurate Counter
Create amazing blog posts 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!