Photoshop Question posted in
The official user guide can be found here.

How to cover image/text with another one – Photoshop

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:

Expected

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search