Applying a CSS and SVG mask

Developer
Shak Daniel
Size
2,363 Kb
Views
40,480
  1. Applying a CSS and SVG mask Previews
  2. Applying a CSS and SVG mask HTML Codes
  3. Applying a CSS and SVG mask CSS Codes

How do I make an applying a css and svg mask?

What is a applying a css and svg mask? How do you make a applying a css and svg mask? This script and codes were developed by Shak Daniel on 24 September 2022, Saturday.

Applying a CSS and SVG mask Previews
IQ Test

Applying a CSS and SVG mask - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Applying a CSS and SVG mask</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! */ html{ width:100%; height:100%; background-image: linear-gradient(#8b9da9, #fff6e4); box-shadow: inset 0 0 100px hsla(0,0%,0%,.3);
}
.instamask { margin: 20px auto; text-align: center;
}
.instamask img { width: 50%; height: auto;
}
.instamask img { -webkit-mask: url('http://iamvdo.me/conf/2012/kiwiparty/img/masque2.png'); mask: url('#mask'); -webkit-mask-size: 100% 100%; -webkit-mask-position: center; transition: -webkit-mask-size .3s;
}
.instamask img:hover { -webkit-mask-size: calc(100% / 5) calc(100% / 3);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="instamask"> <img src="http://phlearn.com/wp-content/uploads/2012/08/Amelia_Cinemagraph.gif" />
</div>
<svg> <!-- THE mask --> <mask id="mask" maskContentUnits="objectBoundingBox"> <!-- using an img, but this img is black/transparent so we filter it to make it white --> <image xlink:href="http://iamvdo.me/conf/2012/kiwiparty/img/masque2.png" width="1" height="1" preserveAspectRatio="none" filter="url(#filter)"/> </mask> <!-- the filter to make the image white --> <filter id="filter"> <feFlood flood-color="white" /> <feComposite in2="SourceAlpha" operator="in" /> </filter>
</svg> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Applying a CSS and SVG mask - Script Codes CSS Codes

html{ width:100%; height:100%; background-image: linear-gradient(#8b9da9, #fff6e4); box-shadow: inset 0 0 100px hsla(0,0%,0%,.3);
}
.instamask { margin: 20px auto; text-align: center;
}
.instamask img { width: 50%; height: auto;
}
.instamask img { -webkit-mask: url('http://iamvdo.me/conf/2012/kiwiparty/img/masque2.png'); mask: url('#mask'); -webkit-mask-size: 100% 100%; -webkit-mask-position: center; transition: -webkit-mask-size .3s;
}
.instamask img:hover { -webkit-mask-size: calc(100% / 5) calc(100% / 3);
}
Applying a CSS and SVG mask - Script Codes
Applying a CSS and SVG mask - Script Codes
Home Page Home
Developer Shak Daniel
Username shakdaniel
Uploaded September 24, 2022
Rating 4.5
Size 2,363 Kb
Views 40,480
Do you need developer help for Applying a CSS and SVG 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!

Shak Daniel (shakdaniel) Script Codes
Name
Plaid background
Pure CSS Terminal
Drag -n- Blur
Cute Loading
Samurai Slash
A Pen by Shak Daniel
Ninja Zoom Nav
Animated Logo
Prescreen
Cool BackGround
Create amazing captions 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!