How to apply text over image on hover? [duplicate] - html

Question

This question already has answers here:
How to overlay images
(11 answers)
Closed 3 years ago.
I want to apply text over image on hover to every picture without it messing up elements container.
I've tried THIS and solutions similar, but It doesn't work for me.
This is what I have.
/*CSS*/
.item {
display: inline-block;
}
img {
padding-right: 10px;
}
.kulso {
text-align: center;
padding-top: 20px;
}
.kulso2 {
text-align: center;
}
<!--HTML-->
<div class="kulso">
<div class="item">
<img src="./img/long_macchiato.jpg" width="300px" height="200px" />
<p>Long Macchiato</p>
</div>
<div class="item">
<img src="./img/longblack.jpg" width="300px" height="200px" />
<p>Long Black</p>
</div>
<div class="item">
<img src="./img/café latte.jpg" width="300px" height="200px" />
<p>Café Latte</p>
</div>
<div class="item">
<img src="./img/ristretto.jpg" width="300px" height="200px" />
<p>Ristretto</p>
</div>
</div>
<div class="kulso2">
<div class="item">
<img src="./img/Cappuccino.jpg" width="300px" height="200px" />
<p>Capuccino</p>
</div>
<div class="item">
<img src="./img/flat-white.jpg" width="300px" height="200px" />
<p>Flat White</p>
</div>
<div class="item">
<img src="./img/mocha-coffee.jpg" width="300px" height="200px" />
<p>Mocha Coffee</p>
</div>
<div class="item">
<img src="./img/affogato.jpg" width="300px" height="200px" />
<p>Affogato</p>
</div>
</div>
Demo site:
https://peaceful-carson-9d2ad7.netlify.com/products.html/
I understad I have to have a wrapper around each image and caption. My problem is, no matter what properties I'm modifying or adding while trying to apply the text over image on hover using THIS, either...
"inline-block" is off, the pictures won't stay next to each other
opacity, transition affects padding between pictures
the text is in the center of the page, not the picture
the size of the pictures change
I noticed that adding
<div class="text">This is the text that appears on hover in the center of the image</div>
instantly messes up everything.
Please give me tips or solutions using my code I shared above!

Answer 1

You have to have a wrapper around each image and caption, much like the examples you link to. You can modify this a bit as the css could be a bit cleaner but this is the basic thing you can do.
.container {
padding-bottom: 20px;
}
.container__row {
display: flex;
}
img {
max-width: 100%;
display: inline-block;
padding-bottom: 10px;
}
/* For medium devices (e.g. tablets) */
#media (min-width: 420px) {
.image-container {
max-width: 48%;
}
}
/* For large devices (e.g. desktops) */
#media (min-width: 760px) {
.image-container {
max-width: 24%;
}
}
.egykispadding {
padding-top: 20px;
}
.image-container {
position: relative;
max-width: 400px;
}
.image-container__caption {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: deepskyblue;
color: white;
font-size: 2rem;
opacity: 0;
visibility: hidden;
transition: opacity 140ms;
}
.image-container:hover .image-container__caption {
opacity: 1;
visibility: visible;
}
<div class="container">
<div class="container__row egykispadding">
<div class="image-container">
<img src="https://www.stickpng.com/assets/images/580b585b2edbce24c47b2c8c.png" width="400" height="200" />
<div class="image-container__caption">Image caption</div>
</div>
</div>
<div class="container__row">
<div class="image-container">
<img src="https://www.stickpng.com/assets/images/580b585b2edbce24c47b2c8c.png" width="400" height="200" />
<div class="image-container__caption">Image caption</div>
</div>
<div class="image-container">
<img src="https://www.stickpng.com/assets/images/580b585b2edbce24c47b2c8c.png" width="400" height="200" />
<div class="image-container__caption">Image caption</div>
</div>
</div>

Answer 2

You can try this:
<div id='hover2change' style="background-image:url('a.png');width:50px;height:50px;">
<img src="b.png" style="position:absolute;top:0px;left:0px;width:50px;">
</div>
<style>
#hover2change:hover img {left:-100%;}
</style>