mizech mizech - 1 year ago 86
CSS Question

Relative & absolute Positioning in CSS : Is it possible to create a "punched-out" effect?

I've got an colored background and another element which is layed over that background. Done by using CSS-positioning.

Absolute positioned element in front.

My idea is to make the area which is covered by the lorem ipsum-text basically to "disappear". So that the background-orange and -cornsilk come through.

One could say:

The absolute positioned element shall look like some board with the chars "punched out". Hold above some background.

Is that possible with CSS?


Here's the code:

(function(selector, horizontalOffset, verticalOffset) {
var items = document.querySelectorAll(selector);
items = Array.prototype.slice.call(items);

items.forEach(function(item) {
// Every time the pointer moves over the element the
// CSS-rule in overwritten with new values for
// top and left.
item.addEventListener('mousemove', function(e) {
let countCssRules = document.styleSheets[0].cssRules.length;
let newRule = selector +
':hover:after { display: block; ' +
'left: ' + (e.offsetX + horizontalOffset) + 'px; ' +
'top: ' + (e.offsetY + verticalOffset) + 'px; }';

document.styleSheets[0].insertRule(newRule, countCssRules);
})('.tooltip-item', 10, 5);

.wrap {
width: 1000px;
margin: 50px auto;
font-family: georgia, serif;
background-color: cornsilk;

div.tooltip-item {
background-color: orange;
width: 450px;
height: 100px;
border: 1px solid black;
border-radius: 8px;
margin: 60px 10px;

.tooltip-item {
position: relative;

.tooltip-item:after {
content: attr(data-message);
position: absolute;
left: 105%;
white-space: nowrap;
display: none;
font-size: 1.2rem;
background-color: rgba(230, 230, 230, 0.6);
padding: 10px 20px;
border-radius: 16px;
font-family: Tahoma, Verdana, Segoe, sans-serif;
font-weight: normal;

div.tooltip-item:after {
background-color: cyan;
color: #ff14ec;
font-weight: 800;
border-radius: 20px;
box-shadow: 6px 6px 9px #969696;
text-transform: uppercase;

<div class="wrap">
<div class="tooltip-item" data-message="Lorem ipsum dolor sit amet, consectetuer adipiscing elit."></div>

What I want is the colors (currently violet) behind the cyan tooltip-box to come through.

I've found these picture (the first one at the very top) showing want I mean:

Answer Source

you could use something like this :

p {
   background: url("http://beerhold.it/579/300") no-repeat;
   -webkit-background-clip: text;
   background-clip: text;

but background-clip-text; is not supported in IE . see more here background-clip CSS