Image clip path mask

Developer
Sander
Size
3,911 Kb
Views
8,096
  1. Image clip path mask Previews
  2. Image clip path mask HTML Codes
  3. Image clip path mask CSS Codes
  4. Image clip path mask JS Codes

How do I make an image clip path mask?

What is a image clip path mask? How do you make a image clip path mask? This script and codes were developed by Sander on 18 December 2022, Sunday.

Image clip path mask Previews
IQ Test

Image clip path mask - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Image clip path mask</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/jbxqev.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="clip-buttons-container"> <a href="#" class="btn" data-shape="remove">Remove</a> <a href="#" class="btn" data-shape="rectangle">Rectangle</a> <a href="#" class="btn" data-shape="triangle">Triangle</a> <a href="#" class="btn" data-shape="circle">Circle</a> <a href="#" class="btn" data-shape="mask">Mask</a>
</div>
<div class="clip-item"> <img src="http://cdn.sanderkeurentjes.com/stock-images/desert-road-horizon.jpg" alt="Masked images" />
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Image clip path mask - Script Codes CSS Codes

.clip-buttons-container { text-align: center; padding: 20px; background: rgba(0, 0, 0, .1); border-bottom: solid 1px rgba(0, 0, 0, .2); .btn { display: inline-block; padding: 10px 20px; margin: 5px; text-decoration: none; color: #fff; background: $primaryColor; border-radius: 3px; cursor: pointer; &:hover { background-color: darken($primaryColor, 10%); } }
}
.clip-item { postion: relative; width: 640px; margin: 40px auto; img { width: 640px; height: auto; &.triangle { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } &.circle { clip-path: circle(160px at center); } &.rectangle { position: absolute; max-width: 100%; max-height: 100%; clip: rect(0px, 440px, 320px, 200px); } &.mask { mask: url(http://cdn.sanderkeurentjes.com/stock-images/letter-s.svg); mask-size: contain; mask-repeat: no-repeat; mask-position: center center; } }
}

Image clip path mask - Script Codes JS Codes

$('.btn').click(function(e) { var shape = $(this).attr('data-shape'); e.preventDefault(); $('.clip-item img').removeClass(); $('.clip-item img').addClass(shape);
});
Image clip path mask - Script Codes
Image clip path mask - Script Codes
Home Page Home
Developer Sander
Username skeurentjes
Uploaded December 18, 2022
Rating 3
Size 3,911 Kb
Views 8,096
Do you need developer help for Image clip path mask?

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!

Sander (skeurentjes) Script Codes
Name
Sticky widget
Simple gallery
Button hover effects
Image gallery with caption
Flexbox layout
Search field
Animates search input with only css
Dropdown navigation
Card flip
Horizontal navigation
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!