Utilize SVG background with transparent text for a clear view of surrounding content

I'm looking for a way to overlay a video with a semi-transparent black div that includes text and a button, while still allowing users to see the video playing behind it. I previously achieved this using a PNG image but now need to apply the effect to a button as well. I'm considering using SVG but am unsure of how to implement it. Any advice or guidance would be greatly appreciated. Thank you.

Answer №1

One way to achieve this effect is by using an SVG image overlay on top of the background.

.wrapper {
  position: relative;
}

.wrapper svg {
  position: absolute;
  left: 0;
  top: 0;
}
<div class="wrapper">
  <img src="http://lorempixel.com/640/480"/>

<svg id="overlay" width="640" height="480" viewBox="0 0 640 480">
  <defs>
    <mask id="mymask">
      <rect width="100%" height="100%" fill="white"/>
      <text x="320" y="140" text-anchor="middle" font-size="40px" >Some transparent text</text>
      <text x="320" y="190" text-anchor="middle" font-size="40px" >has been placed here</text>
      <rect x="220" y="300" width="200" height="50" fill="black"/>
      <text x="320" y="335" text-anchor="middle" fill="white" font-size="30px">BUTTON</text>
    </mask>
  </defs>

  <rect fill="black" fill-opacity="0.7" width="100%" height="100%" mask="url(#mymask)"/>
</svg>
  
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error message: Error in jQuery: Object is required for Internet

I have a button that is designed to trigger the opening of a jQuery UI Dialog when clicked. Strangely, it works perfectly in FF3, FF4, Chrome, and IE8 with ChromeFrame, but fails to function in regular IE8. The error message displayed simply states "Object ...

The process of uploading a file to the server directory via ajax is not functioning correctly. Despite attempts to upload the image, it does not successfully transfer to the designated upload

I am encountering an issue with uploading files to the server upload directory using AJAX. The image is not being successfully uploaded and I keep receiving a "connection reset" error. Can you please review my code below to see if there are any mistakes? T ...

PHP - Variables can only contain text characters

I am in the process of creating a website and I require a specific function. This function is intended to convert the string into plain text only. For example: $string = "Hello world<div width="100000">aaa</div>"; Rendering this as HTML cou ...

Utilizing JQUERY and AJAX for conditional statements

I am currently in the process of creating a basic chat bot. At this point, the bot replies when the user inputs a pre-defined question. However, I am trying to figure out how to program the chatbot to respond with a "sorry, I don't understand" message ...

The alignment of the label button within the form-group is being set to the top

While using Bootstrap 4, I encountered an issue with aligning the save button in a form group because there was no label at the same level. Despite trying to follow an example from here, I still had to hard code margin-top to prevent the button from bein ...

What is the process for importing DataTables using npm?

My attempt to import "datatables.net-select" using the usual method doesn't seem to be working. After checking the website, I found that the correct way to do it is: var $ = require( 'jquery' ); var dt = require( 'datatable ...

Navigating between pages using React-router-dom

Just implemented a simple navigation using react-router-dom. Managed to get it working with this.props.history.push('/pathName'); But I'm not entirely sure if my understanding and approach are correct. Any advice on correcting my mistakes wo ...

I am currently working on completing my order book code, but I am struggling to understand how to summarize the objects

I have been working on my order book code and I am struggling to figure out how to summarize objects. Below is the current code that I have: const orderbook = [ { "ClientID": "31135d2c-a5f0-11ed-b07a-10e7c6f7c62e", "Side": "BID", ...

When receiveMessage is triggered, the FCM push notification fails to refresh the view

After following this helpful tutorial on Push Notifications with Angular 6 + Firebase Cloud Messaging, everything is working perfectly. I am able to receive notifications when using another browser. To ensure that my notification list and the length of no ...

Tips for Sending Information to the Current Page Using JQuery

I am attempting to send the form data back to the same location as the form itself. The code needs to: Trigger the click action for #submit Retrieve data from #email, #selection1, and #selection2 Hide the form #form Show the data in #email, #selection1, ...

Using regular expressions to extract URLs from code in Python

My research involves a dataset of newspaper article links, but I've run into an issue. The links in the dataset all end with .ece extension, which is causing problems due to some API restrictions. http://www.telegraaf.nl/telesport/voetbal/buitenlands ...

Is the input field not properly centered on the page?

Can someone explain why the input field is not aligning in the center? I am new to web development and need some assistance. <input type="text" id="search_bar" class="form-control" placeholder="Search" align="center"> In my CSS, I've ...

Tips on moving the first item on the Bootstrap navigation bar to the left side

I have successfully implemented a Bootstrap navigation bar and created a container to display some descriptive text beneath it, as depicted in the image provided. Utilizing the most up-to-date version of Bootstrap has ensured smooth integration. https://i ...

Utilize a single image to encompass the entire background/theme

As a beginner, I am eager to learn how to use html and css. I understand the importance of being able to style an entire webpage in order to prevent issues like page overload or cache problems. Are there any easy-to-understand examples available for begi ...

Is there a straightforward method to retrieve all information from Vue.js?

Is there a way to extract all of this data? I've attempted using this._data.forEach but it doesn't seem to be effective. Thank you! data() { return { childData: '', credit: '', company: '', email: ...

JSONP callback function enables cross-domain communication by allowing a

After delving into the world of JSONP callback functions, I decided to familiarize myself with the concept by researching articles. To further understand JSONP, I uploaded a JSON file onto the server - json file Below is the JavaScript code I used to fet ...

switchMap: Triggering multiple requests simultaneously (2)

Currently, I am utilizing Angular 2 RC-4 and facing an issue where a network request is being triggered twice whenever there is a change in the input box. This is what my code looks like: component.ts this.term = new Control(); this.suggestions = this. ...

Looking for an Angular Material component that displays a list of attributes?

I am trying to create a dynamic list of properties in Angular using Material Design that adjusts for different screen sizes. For example, something similar to this design: https://i.stack.imgur.com/EUsmV.png If the screen size decreases, the labels shou ...

Interfacing Highcharts with Angular for seamless data binding across series

I am fairly new to using highcharts and I am having difficulty binding my data into the series parameter. In my controller, I have an array of objects that I want to display (when I use console.log, I can see that they are all properly there) this.plotDa ...

Move the box upwards and change it to grayscale when hovering over the image, then reverse the effect when the hover

As I hover over the image, my goal is to make a gray box appear at the bottom and smoothly slide up. While it slides up, everything it covers should turn grayscale. When I move my mouse away from the image, I want the gray box to slide back down and remove ...