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

Troubleshooting React-Redux: Button click not triggering action dispatch

I am facing an issue where my action is not being dispatched on button click. I have checked all the relevant files including action, reducer, root reducer, configStore, Index, and Component to find the problem. If anyone can help me troubleshoot why my a ...

javascriptreactjsreduxreact-redux

The code snippets in the Vue3 documentation are quite peculiar

As I peruse the Vue 3 documentation, I notice a recurring pattern in how example code is presented for components: Vue.createApp({}) However, my experience with Vue 3 has been different. Instead of the above syntax, I simply use: <script> export d ...

javascriptnode.jsvue.jsvuejs3

The trio of Angular, jQuery, and Chrome extensions is a powerful

I'm currently working on developing a Chrome extension that can alter the content of a specific website. However, since I don't have access to the source code of the website, I need to make these modifications using JavaScript. The goal is to ma ...

javascriptjqueryangularjsgoogle-chrome

Encountering difficulty when trying to initiate a new project using the Nest CLI

Currently, I am using a tutorial from here to assist me in creating a Nest project. To start off, I have successfully installed the Nest CLI by executing this command: npm i -g @nestjs/cli https://i.stack.imgur.com/3aVd1.png To confirm the installation, ...

javascriptnode.jstypescriptnpmnestjs

Utilize Vue.js to incorporate an external JavaScript file into your project

Currently, I am utilizing Vue.js 2.0 and facing an issue with referencing an external JavaScript file in my project. The index.html file contains the following script: <script type='text/javascript' src='https://d1bxh8uas1mnw7.cloudfro ...

javascriptvue.jsvue-component

Dealing with 404 page not found error without replacing the default in Next.js 13

I followed the Next.js 13 documentation's suggestion to create a file called not-found.jsx in my app directory to handle 404 errors. But, despite placing it inside the app directory and intended for layout and loading purposes, it is not overriding th ...

javascriptreactjsnext.js

c# JavaScriptConverter - understanding the deserialization of custom properties

I'm facing an issue where I have a JSON serialized class that I am trying to deserialize into an object. For example: public class ContentItemViewModel { public string CssClass { get; set; } public MyCustomClass PropertyB { get; set; } } Th ...

c#javascriptjsonserialization

Tips for transforming code with the use of the then block in javascript, react, and cypress

In my code snippet below, I have several nested 'then' clauses. This code is used to test my JavaScript and React code with Cypress. { export const waitForItems = (retries, nrItems) => { cy.apiGetItems().then(items => { if(items ...

javascriptreactjscypress

Using React to create multiple modals and dynamically passing props

Each item in my list (ProjectActivityList) has an Edit button which, when clicked, should open a modal for editing that specific item. The modal requires an ID to identify the item being edited. var ProjectActivities = React.createClass({ onEditItem: ...

javascriptreactjssemantic-ui

Steps for initializing input field with pre-existing values using Redux form

After reviewing the Redux Form documentation, I noticed that the example provided only fetches initial values upon button click. However, my requirement is to have these values available immediately when the page loads. In my current setup, I can successf ...

javascriptreactjsredux-form

Refreshing a Vue JS component

As a beginner in VueJs, I am facing an issue with reloading a component and table when a refresh button is clicked. I have tried using the forceUpdate method and changing keys, but it has not been successful so far. If anyone has any suggestions on how to ...

javascriptvue.jsvue-componentreload

Once appearing, the element quickly vanishes after the fadeIn() function is

In the source code, there is a section that looks like this: <div class="dash page" id="home"> <?php include ('pages/home.php'); ?> </div> <div class="dash page" id="screenshots"> <?php include ('pages/scr ...

javascriptjqueryhtml

Troubleshooting Browser Behavior: Back Button Not Loading Page - jQuery and HTML5

I've built a dynamic slideshow using jQuery to change images with seamless transitions. To enhance user experience, I'm also updating the page title and URL without triggering a page reload. The code snippet below illustrates how I achieve this: ...

javascriptjqueryhtmlbrowser-history

Exploring the possibilities of utilizing classes in testing scenarios with Vue, Cypress, and Cucumber

I am currently working on setting up e2e tests using Cypress and Cucumber for my project. The application is built with Vue CLI 4.1.1, and I have added the package cypress-cucumber-preprocessor (V1.19.0) via NPM. Update: After extensive research and tes ...

javascriptvue.jscucumbertddcypress

The message indicates that "items" has not been defined

Below is the code snippet: const mongoose = require('mongoose'); const Schema = mongoose.Schema; const userSchema = new Schema({ name: { type: String, required: true }, email: { type: String, require ...

node.jsmongodbexpressmongoosemongoose-schema

Guide to sending multiple images through an upload form using Ajax and Node.js

I need help sending form data to the server side using jQuery.ajax. My requirement involves uploading multiple images. Upon pressing the submit button, I want to send the image paths via ajax to a server running on node.js. However, since I am using a fo ...

ajaximagenode.js

Repeating the process of running a function multiple times

export default function MyQuestions() { const router = useRouter(); const [auth, setAuth] = useState(false); const checkAuth = async () => { const loggedInUsername = await getUsername(); if (router.query.username === loggedInUsername) re ...

javascriptreactjsfunctionnext.js

Display an image with HTML

My current project involves creating a chrome extension that will display a box over an image when hovered, while also zooming the image to 1.5 times its original size. In my research, I came across a similar example. .zoomin img { height: 200px; wi ...

javascriptjquerycsshtml

Troubleshooting Issues with Google Analytics Internal Link trackEvent Functionality

Using ga.js, I have encountered an issue with tracking internal links on my website. Despite successfully tracking external links and viewing real-time reports for events, the internal links are not being recorded accurately. While testing pages, the tot ...

javascriptjquerygoogle-analytics

form controls disappear upon adding form tags

Currently experiencing an issue with angular and forms that I could use some help with. I have a dynamic form that is functioning properly, but now I need to add validations to it. After following this guide, I established the structure correctly. Howeve ...

javascripthtmlangularjsforms