Mar 18, 2020
Glass effect with CSS masks. - demo and code https://codepen.io/yoksel/pen/bGdKbWJ - collection of CSS image effects https://freefrontend.com/css-image-effects/
Loading...
seen from United States
seen from United States
seen from United States
seen from Brazil
seen from United States
seen from Malaysia
seen from Spain
seen from United States
seen from China
seen from United States
seen from United States
seen from Spain
seen from Austria
seen from United States
seen from South Korea
seen from China
seen from Malaysia
seen from China
seen from United States
seen from Argentina
Glass effect with CSS masks. - demo and code https://codepen.io/yoksel/pen/bGdKbWJ - collection of CSS image effects https://freefrontend.com/css-image-effects/
Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.
Free to watch β’ No registration required β’ HD streaming
hey web dev side of Tumblr, I have an issue I cannot figure out and SO is killing me with the similar-but-not-same issue posts online.
Basically, I am trying to make a mask on a static HTML page, but whenever I try to add a photo for the mask, the entire container the mask is applied to goes transparent. So if I have a div with a nested img and the mask is applied to the div, the whole div row disappears β the space made by the img is still there and i can even drag the photo from where it should be and the tile for it shows β but nothing is visible. If i nest that img in another div and apply the mask-image to it (and set the background color to the parent div to, say, black, i see the black background, but the child div and img are not visible.
BUT! If i set the mask-image to a gradient, it works with no issue. Remove the mask-image? no issue. add more than one mask-image (the url() and a gradient), the gradient shows no problem and the actual picture is ignored entirely.
It's not browser specific (FF, Chrome, Edge), there are no errors in the console, I tried mask shorthand and just mask-image, the photos are in the same folder as the html file, and I've tried PNG and SVG (black star with transparent background, black square with transparent star cutout, black square with cutout with a star shaped layer in black) adding the pictures as background images for the container itself... I got nothing.
Can someone please help me. Idk what's going on.
Sample code (sorry about the format, I'm on mobile typing this from memory):
<!DOCTYPE html>
<html>
<head>
<style>
. test {
-webkit-mask-image: url(mask_name.png);
mask-image: url(mask_name.png);
}
</style>
</head>
<body>
<p>Mask</p>
<div class="test">
<img src="photo_name.jpg" alt="" width="300" height="400">
</div>
<p>No Mask</p>
<img src="photo_name.jpg" alt="" width="300" height="400">
</body>
</html>
Yet work on Firefox 13,
http://joelb.me/blog/2011/css-mask-tutorial-rotating-image-gallery/