Creating a Rectangle Overlay Effect on an Image using HTML/CSS

I have a React App where I am displaying live updates on NFL games. I want to overlay a football field image with a dynamic rectangle SVG element that represents the distance covered by the team in yards, while the remaining distance is left uncovered. This is what I currently have implemented:

https://i.sstatic.net/fwLIM.png

Although I can adjust the size of the rectangle dynamically, it tends to shift position when the screen is resized, causing it to no longer align with the image.

Is there a way to ensure that the shading always covers a specific percentage of the image, regardless of the screen size? My current method is quite basic as I am still new to working with CSS:

<img className="col l5 offset-l2" src="./field.jpg" alt={this.props.team1} style={{height: "40%", width: "40%"}}></img>
<svg width="600" height="205" style={{ marginLeft: "635px", marginTop: "-110%", marginBottom: "1.5%" }}>
        <rect width="206" height="210" style={{ zIndex: "9", position: "absolute", fill: "rgb(0,0,255)", opacity: "0.4", strokeWidth: "0", stroke: "rgb(0,0,0)" }} />
</svg>
htmlcssreactjs

Answer №1

Here's a suggestion for you to try out:

For the CSS styling:

.box {
    width: 30%;
    height: 30%;
    background-image: url("./landscape.jpg");
    background-repeat:no-repeat;
    background-position: center;
    background-size: cover; /*if not working, try 'contain'*/
    position: relative;
}

.box svg{
    position: absolute;
    left: 0;
    top: 0;
    width: 25%;
    height: 25%;
    z-index: 2;
}

And for the HTML structure:

<div class="box">
   <svg width="800" height="300">
       <rect width="250" height="150" />
   </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

Upcoming 14: The page file remains unresponsive to any input

After upgrading to Next 14 from version 12, I encountered a problem with creating pages using the app directory. In my layout file, I defined a Navbar which functions correctly, however, the children of the layout file are not reacting as expected. The lin ...

reactjsnext.js

What is the best way to conditionally render one of several components in a manner that is compatible with React's change detector?

Within my CRUD application, I have incorporated various reusable components such as a "generic" DialogComponent, along with several non-reusable components. Throughout the development process, I have encountered numerous instances where I need to either: ...

javascriptreactjstypescriptreact-functional-component

Unable to retrieve specific user data from an Express app within a React application

I am currently facing an issue with retrieving objects that are associated with a specific user ID. Previously, I was able to fetch all the insurance policies and display them, but now I am struggling to filter out only the ones belonging to a particular u ...

node.jsreactjsexpressreact-router

Showing the Length of Several Videos Simultaneously on a Webpage

I am attempting to showcase the "duration" for each video on the page using JavaScript. This is my current code: var vid = document.querySelector(".mhdividdur"); vid.onloadedmetadata = function() { var x = document.querySelector(".mhdividdur").duratio ...

javascripthtmlvideohtml5-videometadata

Error: This property is not available on either 'false' or 'HTMLAudioElement' types

When working with React (Next.js) using hooks and typescript, I encountered an issue while trying to create a reference to an Audio element. The error message I received was: Property 'duration' does not exist on type 'false | HTMLAudioEleme ...

reactjstypescriptnext.js

Error encountered in CRACO app while utilizing the 'babel-plugin-import' plugin: "Unable to locate '@mui/material/ThemeProvider' in 'app/src/Component'"

I've been working on reducing the size of my bundle, particularly focusing on the "@mui/material" package. I found a helpful guide on their website: https://mui.com/material-ui/guides/minimizing-bundle-size/. Despite following all the steps outlined ...

reactjsmaterial-uibabeljscraco

Sorting of tables does not function properly following an ajax request

I built a table that utilizes an AJAX response triggered by selecting a date from a drop-down menu. <!--datepicker--> <div class="col-md-4"> <input type="text" name="date_po_month_picker" id="date_po_month_picker" class ...

jqueryajaxhtml

Having trouble with the POST request in React Native with Redux?

When attempting to access a mock authentication API through axios, the action flow is as follows: Dispatch loginRequest Make API request If successful, dispatch loginSuccessful If failed, dispatch loginFailure The issue arises when the loginRequest acti ...

reactjsreact-nativeaxiosredux-thunk

HTML5, canvas covering every element

Below is the code that I am working with: <html> <head> <title>canvas</title> </head> <body> <canvas width="1745" height="569" style="width: 1730px; height: 1680px; position: absolute; z-index: 1"></canvas> ...

csshtml

The absence of the Ionic modalController in the React package has been noted

While working with the react and ionic package, I attempted to import modalController from '@ionic/react'. However, an error occurred: Error: When importing '@ionic/react', 'modalController' does not have a default export.. ...

reactjsionic-frameworkionic4

Is there a way to remove backdrop-filter: blur effect from elements within a div?

Having an issue with a CSS property. I have designed a modal that includes inputs and labels, and I want to blur the background content. However, the problem I am facing is that the blur effect is also being applied to all elements inside the container, in ...

htmlcssblur

"Struggling with the 2-Column Layout Glitch

I attempted to follow a tutorial for creating a 2 column layout from this person: Here is the result of my implementation: / http://jsfiddle.net/WrpA8/ The CSS: #container { width: 800px; margin: 40px auto; border: 1px solid black; } #header ...

csslayout

Layering images and headlines on top of other images

I'm attempting to place text and an image over the sublime text blank document (please visit: ) Currently, my h1 is on top of the image that I want it to be laid over. Additionally, there's another image I'd like to overlay as well. Could ...

htmlcsstwitter-bootstrap

Increase the count if the item is already in the shopping cart - React

Is there a way to avoid adding the same product to the basket multiple times and instead just increment a counter? How can I effectively keep track of each item's count? this.state = { description: '', commaSalesPrice: '', ...

javascriptreactjsmaterial-ui

Having trouble with script tag not loading content in Next.js, even though it works perfectly fine in React

Currently, I am attempting to utilize a widget that I have developed in ReactJS by utilizing script tags as shown below- React Implementation import React from "react"; import { Helmet } from "react-helmet"; const Dust = () => { ...

javascriptcssreactjsnext.jsreact-widgets

Is it possible to utilize the output of a function to determine the styling of a div element in Vue?

Hi, I'm trying to use the v-bind:style in my div to apply the textposit function with the textpos prop as a parameter. The function should adjust the style of the div based on the value of the parameter. <div class="container" :style=&qu ...

javascriptcssvue.jsvuex

Using JavaScript to trigger an event when there is a change in the innerHTML or attributes

I have come across a jQuery calendar with the capability to scroll through months, and I am interested in triggering an event each time the month changes so that I can assign event listeners to every td element within the table (with days represented by ...

javascriptjqueryhtml

Increasing a value by +1 with a button click in React JS

I am encountering an issue with the like button functionality in my small application. When the like button is clicked, I want it to increment by +1. Unfortunately, I have been unable to figure out how to achieve this. Below, I have shared all the code tha ...

reactjsreact-hooksmaterial-ui

Click on the "Get Value" button within the material-ui/core/Slider component

Project - using React framework. Objective: Create a line with dots representing various percentages between 0 and 100. The data comes from an external source (for this example, I have used a static array). The quantity and values of the points are dyn ...

reactjsmaterial-uislider

The Bootstrap Library reference causes the anchor hover function to malfunction

Feeling frustrated after encountering an issue where the Bootstrap button class interferes with the hover function in standard CSS. Decided to create a custom solution by adding a grey box next to the button to display hover information instead of using t ...

htmlcsstwitter-bootstrap