How do I make p appear on hover ONTOP of an image? - html

Question

I know the question of overlapping has been answered multiple times, however, I'm trying to place the text on top of the image centred once hovered.
I tried z-index, I tried relative and absolute, decided I'd ask for help.
.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>

Answer 1

You should have set the text CSS first and just then get the hover to show the styles, also, you forgot to set the container styles on your code.
See if that's what you want :
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";
});
Get the following snippet to better view of what you requested :
#container {
max-width: 900px;
margin: 0 auto;
padding: 5px;
font-size: 0;
list-style: none;
background-color: #444;
}
#container li {
display: inline-block;
width: 25%;
vertical-align: middle;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container-cells {
margin: 5px;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
display: block;
position: relative;
overflow: hidden;
}
.imgs {
display: block;
width: 100%;
height: auto;
border: none;
filter: brightness(100%);
transition: all 0.3s;
}
#container li:hover .imgs {
filter: brightness(50%);
}
.overlay {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 0px;
margin: auto;
background: #000;
background-size: 50px 50px;
transition: all 0.3s;
}
#container li:hover .overlay {
height: 30px;
}
.title {
display: block;
padding: 5px 30px;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 40px;
text-align: center;
font-size: 18px;
color: white;
opacity: 0;
transform: translateY(-20px);
transition: all .3s;
}
#container li:hover .title {
transform: translateY(0px);
opacity: 0.9;
}
#media (max-width: 9000px) {
#container li {
width: 25%;
}
}
#media (max-width: 700px) {
#container li {
width: 33.33%;
}
}
#media (max-width: 550px) {
#container li {
width: 50%;
}
}
<ul id="container">
<li>
<a class="container-cells" href="#">
<img class="imgs" src="https://www.madpaws.com.au/wp-content/uploads/2019/02/Raise-Your-Kitten-to-Use-the-Litter-Box-300x200.jpg">
<span class="overlay"></span>
<span class="title">Hello World !</span>
</a>
</li>
<li>
<a class="container-cells" href="#">
<img class="imgs" src="https://www.madpaws.com.au/wp-content/uploads/2019/02/Raise-Your-Kitten-to-Use-the-Litter-Box-300x200.jpg">
<span class="overlay"></span>
<span class="title">Hello World !</span>
</a>
</li>
<li>
<a class="container-cells" href="#">
<img class="imgs" src="https://www.madpaws.com.au/wp-content/uploads/2019/02/Raise-Your-Kitten-to-Use-the-Litter-Box-300x200.jpg">
<span class="overlay"></span>
<span class="title">Hello World !</span>
</a>
</li>
<li>
<a class="container-cells" href="#">
<img class="imgs" src="https://www.madpaws.com.au/wp-content/uploads/2019/02/Raise-Your-Kitten-to-Use-the-Litter-Box-300x200.jpg">
<span class="overlay"></span>
<span class="title">Hello World !</span>
</a>
</li>
<li>
<a class="container-cells" href="#">
<img class="imgs" src="https://www.madpaws.com.au/wp-content/uploads/2019/02/Raise-Your-Kitten-to-Use-the-Litter-Box-300x200.jpg">
<span class="overlay"></span>
<span class="title">Hello World !</span>
</a>
</li>
<li>
<a class="container-cells" href="#">
<img class="imgs" src="https://www.madpaws.com.au/wp-content/uploads/2019/02/Raise-Your-Kitten-to-Use-the-Litter-Box-300x200.jpg">
<span class="overlay"></span>
<span class="title">Hello World !</span>
</a>
</li>
<li>
<a class="container-cells" href="#">
<img class="imgs" src="https://www.madpaws.com.au/wp-content/uploads/2019/02/Raise-Your-Kitten-to-Use-the-Litter-Box-300x200.jpg">
<span class="overlay"></span>
<span class="title">Hello World !</span>
</a>
</li>
<li>
<a class="container-cells" href="#">
<img class="imgs" src="https://www.madpaws.com.au/wp-content/uploads/2019/02/Raise-Your-Kitten-to-Use-the-Litter-Box-300x200.jpg">
<span class="overlay"></span>
<span class="title">Hello World !</span>
</a>
</li>
<li>
<a class="container-cells" href="#">
<img class="imgs" src="https://www.madpaws.com.au/wp-content/uploads/2019/02/Raise-Your-Kitten-to-Use-the-Litter-Box-300x200.jpg">
<span class="overlay"></span>
<span class="title">Hello World !</span>
</a>
</li>
</ul>
You just need to put the text before the image, as the image will be the background either way, just add the the text before, then the image and the text will be siblings, not parent and child, so the effect of hover won't affect the child, therefore, the text color will remain without having the filter applied to it.

Answer 2

Maybe the below is what you're looking for?
How to put text over images in html?
The answer suggests using a "div" tag rather than an "img" tag. Here is an example:
.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>