What is the best way to display letter p when hovering over an image?

Question

What is the best way to display letter p when hovering over an image?

Even though the issue of overlapping has been addressed before, I am struggling to center the text on top of the image when hovered. I have experimented with z-index, relative and absolute positioning, but I'm still seeking assistance.

.flex-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
    padding-left: 7%;
    padding-right: 7%;
    padding-top: 25px;
    padding-bottom: 50px;
    justify-content: center;

}
.flex-container div {
    margin: 0;
    position: relative;
    margin-bottom: -5px;
    font-size: medium;
    text-align: center;
    z-index: 0;
}

.flex-container div:hover {
    filter: brightness(50%);
}

.flex-container div p {
    display: none;
}

.flex-container div:hover p {
    position: absolute;
    color: black;
    z-index: 1;
    text-align: center;
}

<div>
    <a href="Printing/menus.html">
        <img src="../Images/menus-01.png" alt="Printing" style="width:100%; height:auto;"/>
    </a>
    <p>Menus</p>
</div>

html css

Answer 1

Answer №1

It's recommended to define the text CSS first before setting up the hover effect. Additionally, don't forget to apply styles to the container in your code.

If this is what you intended:

HTML :

<div class="container">
  <img src="../Images/menus-01.png" alt="Image" style="width:100%;">
  <div class="topTxt">Text on Center/div>
</div>

CSS :

.container {
  position: relative;
  text-align: center;
}

.topTxt {
  position: absolute;
  display: none;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0%);
}

.container:hover .topTxt {
  display: block;
}

OR use JavaScript :

document.getElementsByClass("container").addEventListener("mouseover", function() {
  document.getElementsByClass("topTxt").style.display = "block";
});

For a better visual representation of your request, here's a snippet:

... (CSS and HTML code snippets continue)

To prevent the hover effect from affecting the text color, place the text before the image so they are siblings rather than parent-child elements.

Answer 2

It's recommended to define the text CSS first before setting up the hover effect. Additionally, don't forget to apply styles to the container in your code.

If this is what you intended:

HTML :

<div class="container">
  <img src="../Images/menus-01.png" alt="Image" style="width:100%;">
  <div class="topTxt">Text on Center/div>
</div>

CSS :

.container {
  position: relative;
  text-align: center;
}

.topTxt {
  position: absolute;
  display: none;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0%);
}

.container:hover .topTxt {
  display: block;
}

OR use JavaScript :

document.getElementsByClass("container").addEventListener("mouseover", function() {
  document.getElementsByClass("topTxt").style.display = "block";
});

For a better visual representation of your request, here's a snippet:

... (CSS and HTML code snippets continue)

To prevent the hover effect from affecting the text color, place the text before the image so they are siblings rather than parent-child elements.

Answer 3

Answer №2

Perhaps this is the solution you've been searching for:

How to overlay text on images using HTML?

The recommended approach involves utilizing a "div" tag instead of an "img" tag. See the example below:

.image {
       width:400px;
       height:400px;
       background-image: url(http://lorempixel.com/output/cats-q-c-640-480-4.jpg);
       background-size:cover;
 }

<div class="image">Text on top of image</div>

Answer 4

Perhaps this is the solution you've been searching for:

How to overlay text on images using HTML?

The recommended approach involves utilizing a "div" tag instead of an "img" tag. See the example below:

.image {
       width:400px;
       height:400px;
       background-image: url(http://lorempixel.com/output/cats-q-c-640-480-4.jpg);
       background-size:cover;
 }

<div class="image">Text on top of image</div>

What is the best way to display letter p when hovering over an image?

Answer №1

Answer №2

Similar questions

retrieve the data-task-IDs from the rows within the table

Dynamic change of table cell text color based on condition utilizing ng-if and ng-style

What is the best way to align an html table to the top of the page?

The columns in the table are hidden when resizing

Modify the background color of the <li> element without using JavaScript after 3 seconds

Proper alignment of div elements using Bootstrap

The addClass method in jQuery is failing to append the specified class to the element

Angular JS failing to display error messages

Issue with LESS CSS: Inability to divide two pixel units and provide a value without units

Tips for stopping variables from leaking in JavaScript

iOS 8 home screen web apps with status bar overlay and footer bar integration

Highlight the title with a stylish CSS animation effect

Safari disables any animation when redirecting or submitting a form

The issue I am facing is that when I click on a checkbox, only one of them seems to respond

Assigning the Style property to an element using a string that includes HTML tags

What is the best way to center a form within a jumbotron using CSS?

Is there a method to individually collapse each div?

CSS - vertical and horizontal lines vary in thickness depending on the design

No Google Adsense ad in sight

AngularJS is used to vertically collapse three different div elements. This feature