Text in gray overlaying image background

Question

Text in gray overlaying image background

I am attempting to design a layout that resembles the following:

https://i.sstatic.net/S5CCK.jpg

Although I can create the letter "A" using svg or clip-path, my challenge lies in maintaining the background inside the "A" aligned with the body background. Essentially, I want the background image to respond like a cover when the window is resized, and the image inside the "A" should react accordingly.

I am struggling to come up with ideas on how to achieve this... the only solution I can think of involves using background-attachment: fixed and crafting the "A" shape with intricate CSS properties such as divs with varying width/height, border radius, translation, etc.

EDIT: Perhaps I didn't clarify the scenario well enough, so please refer to this Demo showcasing what I aim to accomplish. Notice how the grey scale spot remains consistent with the text div when resizing the browser, while the background image covers the width and height uniformly regardless of viewport size, and the image within the spot adjusts to represent the same spot.. My goal is to work with more complex shapes like an A or Z instead of unconventional ones.

html css svg css-shapes

Answer 1

Answer №1

One creative method for achieving responsive letter placement using SVG involves utilizing two versions of the image - one grayscale and the other in color. By masking the colored image with text, you can reveal the grayscaled version underneath. Take a look at the example below:

svg {
  display: block;
  width: 100%; height: auto;
}

<svg viewbox="0 0 300 200">
  <defs>
    <mask id="textMask" x="0" y="0" width="300" height="200">
      <rect x="0" y="0" width="300" height="200" fill="#fff" />
      <text text-anchor="middle" x="100" y="150" dy="1" font-size="150">A</text>
    </mask>
    <filter id="deSaturate">
      <feColorMatrix in="SourceGraphic" type="saturate" values="0" />
    </filter>
    <image id="image" xlink:href="http://i.imgur.com/RECDV24.jpg" x="0" y="0" width="300" height="200" />
  </defs>
  <use xlink:href="#image" filter="url(#deSaturate)" />
  <use xlink:href="#image" mask="url(#textMask)" />
</svg>

Answer 2

One creative method for achieving responsive letter placement using SVG involves utilizing two versions of the image - one grayscale and the other in color. By masking the colored image with text, you can reveal the grayscaled version underneath. Take a look at the example below:

svg {
  display: block;
  width: 100%; height: auto;
}

<svg viewbox="0 0 300 200">
  <defs>
    <mask id="textMask" x="0" y="0" width="300" height="200">
      <rect x="0" y="0" width="300" height="200" fill="#fff" />
      <text text-anchor="middle" x="100" y="150" dy="1" font-size="150">A</text>
    </mask>
    <filter id="deSaturate">
      <feColorMatrix in="SourceGraphic" type="saturate" values="0" />
    </filter>
    <image id="image" xlink:href="http://i.imgur.com/RECDV24.jpg" x="0" y="0" width="300" height="200" />
  </defs>
  <use xlink:href="#image" filter="url(#deSaturate)" />
  <use xlink:href="#image" mask="url(#textMask)" />
</svg>

Answer 3

Answer №2

To create a unique shape, you can utilize the clip-path property and reference an SVG <clipPath>. This method is compatible with all browsers except for IE.

.wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  background: url("http://lorempixel.com/1000/700") no-repeat center center;
  background-attachment: fixed;
  
  -webkit-background-size: cover;
  background-size: cover;
}

.txt {
  background: rgba(0, 0, 0, 0.5);
  padding: 20px;
  color: #fff;
  max-width: 500px;
  padding-top: 20px;
  margin: 50px auto;
  position: relative;
}

.a{
  position: absolute;
  left: -100px;
  top: 0;
  width: 100px;
  height: 100px;
  clip-path: url(#tri);
  -webkit-clip-path: url(#tri);

  background: url("http://lorempixel.com/1000/700") no-repeat center center;
  background-attachment: fixed;
  -webkit-background-size: cover;
  background-size: cover;
  
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

<div class="wrap">
  <div class="txt">
    <div class="a"></div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim ipsum, distinctio molestiae iste ab eum tempore excepturi fugit placeat veniam. Hic minus dolorum, reprehenderit atque, nobis rerum. Quis incidunt, beatae!
  </div>
</div>

<svg width="0" height="0">
  <clipPath id="tri" clipPathUnits="objectBoundingBox">
    <path d="M 0.5,0 L 1,1, 0,1 Z
             M 0.5,0.3 L 0.3,0.7 L 0.7,0.7 Z"/>
  </clipPath>
</svg>

Check out the demo on JSFiddle

Answer 4

To create a unique shape, you can utilize the clip-path property and reference an SVG <clipPath>. This method is compatible with all browsers except for IE.

.wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  background: url("http://lorempixel.com/1000/700") no-repeat center center;
  background-attachment: fixed;
  
  -webkit-background-size: cover;
  background-size: cover;
}

.txt {
  background: rgba(0, 0, 0, 0.5);
  padding: 20px;
  color: #fff;
  max-width: 500px;
  padding-top: 20px;
  margin: 50px auto;
  position: relative;
}

.a{
  position: absolute;
  left: -100px;
  top: 0;
  width: 100px;
  height: 100px;
  clip-path: url(#tri);
  -webkit-clip-path: url(#tri);

  background: url("http://lorempixel.com/1000/700") no-repeat center center;
  background-attachment: fixed;
  -webkit-background-size: cover;
  background-size: cover;
  
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

<div class="wrap">
  <div class="txt">
    <div class="a"></div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim ipsum, distinctio molestiae iste ab eum tempore excepturi fugit placeat veniam. Hic minus dolorum, reprehenderit atque, nobis rerum. Quis incidunt, beatae!
  </div>
</div>

<svg width="0" height="0">
  <clipPath id="tri" clipPathUnits="objectBoundingBox">
    <path d="M 0.5,0 L 1,1, 0,1 Z
             M 0.5,0.3 L 0.3,0.7 L 0.7,0.7 Z"/>
  </clipPath>
</svg>

Check out the demo on JSFiddle

Answer 5

Answer №3

Have you considered using the filter property? Take a look at this example:

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: url(http://lorempixel.com/600/400);
}
.overlay:before {
  content: "A";
  color:white;
  position: absolute;
  font-size: 300px;
  top: 50%;
  left: 50%;
  opacity: 0.4;
  transform: translate(-50%, -50%);
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

<div class="overlay">

</div>

Answer 6

Have you considered using the filter property? Take a look at this example:

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: url(http://lorempixel.com/600/400);
}
.overlay:before {
  content: "A";
  color:white;
  position: absolute;
  font-size: 300px;
  top: 50%;
  left: 50%;
  opacity: 0.4;
  transform: translate(-50%, -50%);
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

<div class="overlay">

</div>

Text in gray overlaying image background

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to position two divs side by side while maintaining their individual padding?

Issue with JQuery: Logo only becomes visible after scrolling

Find the identifier that does not currently exist in the collection of objects

Is it possible to set spacing between the rows of an HTML table without also setting spacing for the columns?

Have you ever wondered how the automatic video play on scroll feature works on Tiktok.com and YouTube shorts when using a mobile device?

Text overlay on image sliders inside div containers

Is there a discrepancy in height between Chrome's mobile emulator and the iPhone simulator?

the side panel is positioned under the main content

JavaScript not functioning on Express-powered HTML document

Is a persistent left border / divider only on the even-numbered items in the list?

Unleashing the Power of Aurelia's HTML Attribute Binding

Steps for aligning an image and text within an icon next to each other

Tips for transforming a date into a time ago representation

CSS does not have the capability to style child elements

Unusual issue with horizontal menu display in Firefox on Mac

What is the best way to transfer a variable from the Cold Fusion back-end page to the HTML front-end section within a CFM file using jQuery Ajax?

Is there a method in bootstrap that reveals the elements with the hidden class?

Utilize visuals to select premade designs

Concluding remarks can be found at the end of the article

What is the best way to ensure that the output responds to the function?