How to cover image/text with another one [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I am new in CSS and HTML but I creating website where I need to cover text or picture with another one. I made example in Photoshop what exactly I need:

Answer 1

A solution based on css shadow:
h1 {
font-family: cursive;
text-shadow: -10px -10px 0px rgba(150, 150, 150, 1);
}
<h1>Lorem Ipsum<h1>
Online tools like : https://css3gen.com/text-shadow/ could help you to construct right text-shadow property

Answer 2

The code is self explanatory, Nevertheless if any question leave a comment.
Text
Using text-shadow less flexible for instance the duplicated the text will always be behind the actual text, If we want to reverse this we will have to align the shadow as the actual text and the actual text as the shadow which is a lot janky and not dynamic.
p {
margin: 2rem;
border:1px solid red;
padding:10px;
display:inline-block;
}
p:hover {
text-shadow: -5px -5px red;
}
<p>Lorem</p>
Using pseudo-element highly flexible, Can place the text anywhere, Drawback is must provide the text as an attribute or a CSS variable
p {
margin: 2rem;
padding: 10px;
display: inline-block;
position: relative;
font-size:1.3em;
}
p:before {
color: red;
position: absolute;
top: 40%;
left: 40%;
width:100%;
}
p:nth-child(1):hover:before {
content: attr(data-text);
}
p:nth-child(2):hover:before {
content: var(--data-text);
}
<p data-text="attribute">attribute</p>
<p style="--data-text:'CSS variables';">CSS variables</p>
Image:
[box] {
width: 300px;
height: 300px;
background: url(https://picsum.photos/300);
position: relative;
}
[box]:hover:before {
content: '';
background: inherit;
width: 100%;
height: 100%;
top: 25%;
left: 25%;
position: absolute;
}
<div box></div>