Is it possible to mask a div, or to overlay text with a masked image?
There is an property in for webkit based browsers called -webkit-background-clip: text
. Write like this:
p{
background-image:;
background: url(http://2.bp.blogspot.com/-NSwhl6hv41Y/Th5EIJL_zZI/AAAAAAAAFc4/UGUNfb--tGc/s1600/vector_wallpaper_by_seppoftw.jpg);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size:100px;
margin:40px;
}
Check this http://jsfiddle.net/yvYG8/
Read this for more http://trentwalton.com/2011/05/19/mask-image-text/
masking a text with a one of image and one of div background color
If I understand you correct, an example in SVG could look like this. Here I use the text as a mask on the image and rectangle.
<svg xmlns="http//www.w3.org/2000/svg" viewBox="0 0 100 20">
<defs>
<mask id="text">
<text x="50" y="10" text-anchor="middle"
dominant-baseline="middle" font-size="18"
font-weight="bold" fill="white">EARTH</text>
</mask>
</defs>
<g mask="url(#text)">
<image x="40" y="-20" width="60" height="50"
href="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/The_Blue_Marble_%28remastered%29.jpg/640px-The_Blue_Marble_%28remastered%29.jpg"/>
<rect width="50" height="20" fill="#83CBFF"/>
</g>
</svg>
How can I mask the visibility of the text with the overlapping element using CSS
You can make the text the child of an element with a background color. Then make the mask by creating an element with a dot and a div set to the background color of the parent. Make the parent's overflow:hidden
so the colored area isn't seen as it moves to uncover the text.
$('.overlay').on('click', function() { $(this).toggleClass('hidden');});
$(window).on('load', function() { $('.overlay').removeClass('hidden');});
body { background: red;}
.container { width: 80%; height: 60px; border-radius: 60px; background: white; overflow: hidden; margin: 20px auto; position: relative;}
.overlay { width: 100%; height: 100%; background: white; transition: left 2s ease-out; position: absolute; top: 0; left: calc( -100% + 60px);}
.overlay.hidden { left: 0;}
.overlay::after { content: ''; background: black; height: 60px; width: 60px; border-radius: 60px; position: absolute; right: 0; top: 0;}
.text { font-size: 50px; line-height: 60px; width: 100%; text-align: center;}
p {text-align: center;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="container"> <div class="text">ezoom</div> <div class="overlay hidden"></div></div>
<p> click the circle to toggle the animation</p>
Can't get text content to be above a masking div
try this (you missed a position: relative;
):
#content h1 {
color: #FFFFFF;
position: relative; //missed
z-index: 2;
}
CSS mask-image, is possible to show an element on top of the mask (without absolute positioning)?
How about applying applying the background-color and the mask to .mask-wave::before
and then absolute position and z-index the pseudo element behind your div. Then you can have your masked shape with background colour behind text or whatever.
Seems to be a duplicate of this How to apply a mask-image only on an element's background and not on its children?
Use a div as a mask over a fixed image
If I understand the effect you want, you may need to use the img
as background; try this:
body{ background: #f3f3f3; height:800px;}div { text-align:center; color:white; width:80%; margin:150px auto; line-height:200px; background:url('http://lorempixel.com/600/600') no-repeat center; background-attachment: fixed;}div h1 { font-size:3em;}
<div> <h1>Mytitle</h1></div>
Can I clip mask text over a div in CSS (with or without the help of JS)?
I would try something like this
html:
<div class="number">1</div>
css:
.number{display: inline-block; background-color: #ccc; max-width: 50px; max-height: 50px; width: 50px; height: 50px; font-size: 80px; font-weight: bold; text-align: center; line-height: 60%; color: #000; overflow: hidden; vertical-align: middle;}
Related Topics
Twitter Bootstrap 3 Modal with Scrollable Body
Creating a Circular Menu with CSS
Zoom in and Out on Mouse Click with CSS
@Font-Face: Bold in Ff Is Bolder Than in Chrome
How to Override Bootstrap's Panel Heading Background Color
<Hr> Inside Container with Display Flex Become Corrupted
Bootstrap Button on Click Showing Default Colour
How to Choose The Last 2 Items in a List with CSS Nth-Child
Does The Order of Styles Matter
Rails - Application.CSS Asset Not Found in Production Mode
Why Does Bem Often Use Two Underscores Instead of One for Modifiers
How to Do a 'Float: Left' with No Wrapping
How to Animate a Glowing Effect on Text
A Way to Correct Background Scaling in Ipad's Safari
How to CSS Style Angularjs Directive
Flexbox: Centered Element with Space-Around Elements on Either Side
What Is The Least Horrible Way to Center an Element with CSS