Troubleshooting problem with text overlaying images upon hovering in CSS

Several months ago, I successfully implemented a cool effect on a Shopify website that I had designed. However, recently the client decided to switch to a new theme without my knowledge, and now one of my CSS tricks is no longer working. If you look at the three images below the blog posts, you'll notice the issue. When hovering over them, the image opacity changes as intended. However, there is also supposed to be text appearing in the center of each image, which is no longer happening. Despite using the same code as before, the text is not displaying as expected. Any ideas on why this may be happening? Here's the CSS code I'm using:

span.text-content, span.text-content-bags {
     color: #ffffff;
     font-size: 30px;
     left: 0px;
     opacity: 0;
     position: absolute;
     text-transform: uppercase;
     top: 0px;
     width: 100%;
}

span.text-content span, div.homepage-bags span.text-content-bags span {
     left: 0px;
     margin-top: -12px;
     position: relative;
     text-align: center;
     top: 50%;
     width: 100%;
}
.homepage-products a:hover span.text-content, .homepage-bags a:hover span.text-content-bags {
    opacity: 1;
    display: inline-block;
}

Answer №1

Looking for a simple technique to perfectly center content within a container?

First, apply position: relative to the outer element, and then use the following code on the element you wish to center:

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: block;
text-align: center;

Remember to specify a height and width for the inner element, using any units.

This method is compatible with all modern browsers, including IE8 and potentially even older versions.

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

What is the best way to make the button cover the entire width?

I have a Vuetify card with a layout where I am rendering some dynamic Vuetify components inside the card based on checkbox selection. These components can be a divider, a spacer, toolbar, or a button. However, I'm struggling to make the buttons span t ...

I'm currently developing a Chrome application specifically designed for editing plain text. To achieve this, I am utilizing the <textarea> element. However, the app will not expand to full screen

Currently, I am in the process of developing a Chrome app and have implemented CSS from a previous post. The main issue I am facing is with the textarea element that I am using. I am open to exploring alternative solutions to achieve the desired outcome. S ...

retrieve information provided by the user

When a user inputs a date into #dateUserInput and clicks the button, I want the fetch function to retrieve the appropriate image for that date. However, an error occurs: VM113:1 Uncaught (in promise) SyntaxError: Unexpected end of JSON input at getimag ...

Developing web applications using a combination of PHP, MySQL, and

I am in need of creating an HTML form that functions as CRUD. This form should be able to record inputs such as "row_number", "channel_name", and "ip_address". It will store all the data in a MySQL table using the "ORDER BY row_number" function. The form i ...

List items that are not in any particular order spilling over onto the next

Having an issue with an unordered list where the list items aren't all on the same line. The 5th element is dropping to the next line even though each item is set to 20% of the container. The math adds up, so not sure what's causing the problem. ...

How can I enhance Parallax scrolling performance on Chrome?

I recently completed a tutorial from the following link: After customizing it by changing the image to something different than clouds, I noticed that my version of the website was experiencing lag issues in Chrome but worked fine in Firefox. However, whe ...

Adjusting the size of a Video/Image Slider to perfectly fit the screen dimensions (both width and height

I have been using a slider code to display my images and videos. The code can be found here: Code:https://codepen.io/1wdtv/pen/jbjZeb The issue I am facing is that the slider is only responsive in terms of width. This means that when resizing the browser ...

The iconbar feature in the mobile menu is experiencing functionality issues

I am currently experimenting with the iconbar property of mmenu (here: ) Unfortunately, I am encountering an issue. The menu opens as expected when I run the code. However, upon closing the menu, it first closes completely and then the container slides sl ...

When viewing HTML "Div" on smaller screens, the full height may not be displayed properly

My setup includes two monitors: one is 24" and the other is my laptop's 12.5" screen. I have a red box (div) in my web application that displays full height on the larger monitor, but only partially on the smaller one. I'm puzzled as to why it s ...

Issue with if statement when checking element.checked

Hey everyone, I'm currently working on a calculator app and running into an issue. I have set up 3 radio buttons and I would like to check them using an 'if statement' in my JS file. However, the problem is that the 'main' element ...

Repair copied website data in Excel spreadsheet

I'm currently in the process of extracting a large volume of data from a website. However, when I paste it into Excel, it's not in a table format and appears like this: France Europe Spain Europe Egypt Africa I'm looking for a way to str ...

When resizing, the image problem does not transition to the next column

Just started learning how to code and I've been stuck on this issue for a while now. Whenever I resize the browser window, the image doesn't move down to the next line after the .text class like I want it to. Instead, it overflows off the page to ...

What is the minimum size a string must be in order to cause the innerHTML render to be disrupted?

Can anyone tell me what the byte limit is for interrupting the rendering of an innerHTML of a DOM element when using innerHTML = $string or .append()? Is it 1MB, 5MB, 10MB? Does it vary by browser? How can I determine this limit? EDIT (11/11/11): I con ...

Setting size using percentages in Semantic-UILet's explore how to define the size

Since discovering semantic-ui a few days ago, I've been impressed and have decided to switch my app from Bootstrap 3 to semantic-ui. I could use some assistance here. I'm attempting to split the body of the page into two parts. I would like the ...

Having trouble adding your own styling to bootstrap-4 using a custom CSS file?

Here is the code I used to connect my two stylesheets, with the custom css file being linked second as per what I believe is the correct way to do it. <!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href=" ...

What is the best way to achieve this layout using HTML?

[Beginner in Web Design] I am currently experimenting with creating a layout similar to the one shown here: https://i.sstatic.net/j70FD.png Here is what I have attempted so far: .inner, .outer { position: relative; } .dash { border: 0; borde ...

Enhancing Bootstrap with VueJS for better component ordering

I've been struggling with Vue components in Bootstrap lately. I am attempting to create collapsible Bootstrap content in Vue, and here is the current code: HTML <div class="col-sm main-content" id="main-content"> <p&g ...

Utilizing extra CSS for a full-width Wordpress featured image makes for a visually stunning design

Is there a way to customize the CSS of a featured image in Wordpress Version 5.9.2 to appear full width? Currently, the image has a large margin and does not fill the entire width as seen on the page below: I attempted to achieve this by adding code to th ...

Personalized Django Sign-in

I am having difficulty accessing the password that needs to be transferred from my form. I need help figuring out where I might be making a mistake. I am looking to create a custom login page because I want to change how usernames are input. For now, I hav ...

Are your macOS devices not displaying the Scrollbar CSS buttons correctly?

I need help troubleshooting why my buttons are not appearing in the scrollbar on macOS. They function properly on Windows, so I suspect there may be a typo or error in my code. Can anyone take a look and provide some insight? ::-webkit-scrollbar { wid ...