How to Mask a <Div>, or to Overlay Text with a Masked Image

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



Leave a reply



Submit