How to apply text over image on hover?

Question

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!

score 0 · Answer 1 · edited Oct 20 '19 at 17:04

0

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>

edited Oct 20 '19 at 17:04

Dino

7,779
12
46
85

answered Oct 20 '19 at 09:06

user3180351

1
3

score 0 · Answer 2 · answered Oct 20 '19 at 09:11

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>

I've tried what you suggested, but It still messes up the container elements. — Akuhei, Oct 21 '19 at 11:19
@Akuhei in what way does it mess them up? If we know we could instruct you how to change so it works. Please update your question with that information. — Dejan.S, Oct 21 '19 at 13:05

How to apply text over image on hover?

2 Answers2