Tips for overlaying text on the background in Next.js:

I'm currently working on creating an image element with overlay text. Check out my jsx code below:

<div className={styles.img}>
    <img src={src} alt="" />
    <p>{`(${size})`}</p>        
</div>

And here is the accompanying sass styling:

.img {
    min-width: 180px;
    text-align: center;
    cursor: pointer;
    img {
        height: 90px;
        box-shadow: orangered 0 0 5px;
    }
    p {
        color: white;
        font-weight: bold;
        margin: auto;
        font-size: .8rem;
        margin-top: - 1.6rem;
        // max-width: 120px;
        // z-index: 100;
        background-color: #0070f3;
    }
}

After implementing this, I encountered an issue where the background of the p tag was only visible outside of the img and not over it. See the result in the following image:

https://i.stack.imgur.com/OyjuA.png

You can also view the live issue here.

How can I adjust the styling to display the background for the overlay text on the image for better readability?

javascriptcssnode.jsnext.jssass

Answer №1

To utilize the z-index property, you must adjust the position from its default value (static). Below is a sample code snippet showcasing the use of position: relative.

p
{
background: #0cf;
margin-top: -1.6rem;
z-index: 100;
}

p.positioned
{
position: relative;
}
<img src="http://via.placeholder.com/100x80"/>
<p>Test without positioning</p>

<img src="http://via.placeholder.com/100x80"/>
<p class="positioned">Test with positioning</p>

Answer №2

Shoutout to @Devid for the helpful comment!

To elaborate, it's important to include position: relative on the p tag specifically. Adding it to the container div won't have any effect.

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

Sending a POST request in a Flutter application results in receiving undefined data

Struggling with login functionality in a simple app, unable to properly send username and password to nodejs server. Tried encoding methods like Map and FormData without success. Request body console logs "undefined". Using Dio dart package for http reque ...

node.jsdartflutter

Disable the button until all input fields contain text in ASP

Curious if anyone knows how to disable a button until all text boxes have input in ASP.NET and C#. Here is an image showing the scenario I'm referring to - wanting to gray out the commit button. Thanks, Chris! ...

c#javascripthtmlasp.net

Generate items above the mesh

I'm currently working on a procedural terrain generation project. I have successfully generated terrain using Perlin noise, and now I want to add procedural grass generation with some specific constraints. My goal is to only generate grass within a c ...

javascriptthree.jsmeshprocedural-generation

Exploring the concept of inheritance in JavaScript and Angular programming

Currently, I am working on a project called "hello world" and it involves two HTML pages named "configuration.html" and "add configuration.html". Each page has its own controller defined as follows: angular.module('MissionControlApp').controller ...

javascriptc#angularjsinheritance

Unlocking the express routes of one docker container from another docker container

Currently, I am developing a microservice that consists of approximately 5 services. Each service operates within its own container, meaning they each have unique IP addresses and individual databases. While each service works flawlessly on its own, my cha ...

node.jsdockerexpressmicroservices

Using NodeJS to integrate WebRTC into JavaScript applications

I am facing a challenge with my JavaScript files that I need to use for creating a WebRTC application. Unfortunately, my hosting platform does not support Node.js. I'm wondering if it's possible to modify these JS files to work without Node.js. C ...

javascriptnode.jswebrtc

Using AJAX and React to handle RESTful requests

Hello there, I am attempting to utilize a web service in React but am encountering issues with the AJAX function. I'm unsure if my code is working as expected. Here is a snippet of my code: prox= {"email":email, "password": password}; //tag comment $ ...

javascriptjqueryajaxreactjs

Leveraging Promises for Concurrent In-Memory Processing

We are currently working on a project that involves processing approximately 5,000 objects, with each object requiring between 200-500 milliseconds to process. One of the developers on our team has suggested utilizing promises to handle the concurrent proc ...

node.jspromisees6-promise

What could be causing my Angular Ngrx app's state not to render properly on the application?

Is there a way to automatically render the state when the app loads without having to click a button? I am currently facing an issue where the state is empty until I manually trigger the click function by pressing a button. I have tried using this.store.se ...

javascriptangularngrx

Rejuvenating JWT's with a refresh token

As I develop my SPA app along with its REST API, I find myself unsure of the best practice for refreshing the JWT using the refresh token. Should I wait until I receive a 401 HTTP status from the server (indicating the JWT has expired), or should I proac ...

node.jsjwt

Issue with Three JS: Unable to load an intricately detailed 3D model

Being a designer without specialized knowledge, I may not be familiar with all the technical specifications of 3D environments. However, for work purposes, we conducted various experiments with importing glTF assets. We utilized the beginner's packag ...

node.jsimportthree.js3dgltf

Error encountered when attempting to include a foreign key

I am attempting to establish a 1:1 relationship between two tables. The RefreshToken table will contain two foreign keys connected to the Users table, which can be seen in this image: https://i.stack.imgur.com/B2fcU.png To generate my sequelize models, I ...

javascriptmysqlnode.jsexpresssequelize.js

Incorporating Optapy into a Node JS web application

Currently, I am immersed in a project that requires the execution of a python script based on an optapy solution. Upon running the web service, my expectation was to receive the solution provided by optapy in response. However, all I got was an autogenerat ...

node.jsoptaplanneroptapy

What steps should I take to get my fixed position to function properly in Internet Explorer 6?

I've attempted the following to solve my issue: body {height: 100%;overflow: auto; body #cornerImage {position: absolute;bottom: 0;} I also tried this solution: { margin:0; padding:0; } html, body { height: 100%; overflow:auto; } body #fixe ...

htmlcssinternet-explorer-6positioningabsolute

Is there a method in AngularJS to compel TypeScript to generate functions instead of variables with IIFE during the compilation process with gulp-uglify?

My AngularJS controller looks like this: ArticleController.prototype = Object.create(BaseController.prototype); /* @ngInject */ function ArticleController (CommunicationService){ //Some code unrelated to the issue } I minified it using gulp: retur ...

javascriptangularjstypescriptprototypeminify

Tips for adjusting the font size of choices within the Material UI autocomplete component

Hey there, I'm currently working on a project using the Material Table and I'm looking to adjust the font size of the options in the Material UI Autocomplete. Any tips would be greatly appreciated! Thanks https://i.sstatic.net/ZM17w.png import R ...

javascriptreactjsmaterial-uifrontendmaterial-table

Displaying or concealing HTML elements using AngularJS while a modal is open

Looking for a way to display a loading spinner icon on my page when a user triggers a button that opens a modal, and then have the spinner disappear once the modal is open and its content has loaded. Currently, I've managed to make the spinner show up ...

javascripthtmlangularjs

Unlocking the API endpoints within nested arrays in a React project

{ [ "quicktype_id": 1, "quicktype": "Laptops", "qucik_details": [ { "type_name": "car", "type_img": "car_img" }, { "type_name": "van", "type_img": ...

javascripthtmlreactjsarraysapi

The error encountered is due to an invalid assignment on the left-hand side

I'm encountering the error below: Uncaught ReferenceError: Invalid left-hand side in assignment This is the problematic code: if (!oPrismaticMaterial = "") { for (var i = 0; i < oPrismaticMaterial.length; i++) { if (oPrismaticMater ...

javascriptjqueryvalidationvariable-assignment

Is it better to use multiple external style sheets?

Hello! I am looking to implement a pop-up login screen by integrating downloaded code. The issue I am facing is that the CSS file that accompanies it clashes with my current one. Is there a way to have a specific style sheet only affect certain div tags, ...

htmlcss