How to make a tooltip over an image?

[OBXKH]

Helo,

plese tell me how to make a tolltip over an image... i know there are different types.... i like the one that fades

please full HTML and CSS

please give me an example

thanks!

 

[VBService]

What do you think in that way?
[ working code on-line ]

<div></div>

div {
  position: relative;
  width: 350px;
  background-image: url('https://picsum.photos/id/169/1300/862');
  background-position: center center;
  background-size: cover;
  aspect-ratio: 1;
  overflow: hidden;
}
div::after {
  content: 'Lorem ipsum';
  position: absolute;
  bottom: 0;
  width: calc(100% - 2rem);
  padding: 2rem 1rem .5rem;
  font: 900 1.2rem/1 system-ui, monospace;
  background-image: linear-gradient(to bottom, transparent 20%, rgba(0, 255, 40, .45) 60%);
  color: white;
  text-align: center;
  opacity: 0;
  transform: translatey(100%);
  transition:
    transform .45s cubic-bezier(.05, .05, .855, .06),
    opacity .75s;
}
div:hover::after {
  opacity: 1;
  transform: translatey(0);
}

 

[VBService]

Last example, little bit different way ...
[ working code on-line ]

<div>
  <div class="tooltip">Lorem ipsum dolore</div>
</div>

<div>
  <div class="tooltip">Lorem ipsum dolore</div>
</div>

body {
  display: flex;
  gap: 2rem;
  margin: 2rem;
}
div {
  position: relative;
  width: 300px;
  background-image: url('https://picsum.photos/id/169/1300/862');
  background-position: center center;
  background-size: cover;
  aspect-ratio: 1;
  overflow: hidden;
}
div .tooltip {
  --gradient-color: rgba(0, 255, 40, .45);
  content: 'Lorem ipsum';
  position: absolute;
  bottom: 0;
  width: calc(100% - 2rem);
  height: 2rem;
  padding: 2rem 1rem .5rem;
  font: 900 1.2rem/1 system-ui, monospace;
  background-image: linear-gradient(to bottom, transparent 20%, var(--gradient-color) 60%);
  color: white;
  text-align: center;
  opacity: 0;
}
div:first-child .tooltip {
  transition: opacity .75s; 
}
div:last-child .tooltip {
  --gradient-color: rgba(0, 0, 40, .45);
  transform: translatey(100%);
  transition:
    transform .45s cubic-bezier(.05, .05, .855, .06),
    opacity .75s;
}
div:hover .tooltip {
  opacity: 1;
  transform: translatey(0);
}

 

[VBService]

Update about mistake in last post.

div .tooltip {
  --gradient-color: rgba(0, 255, 40, .45);
  content: 'Lorem ipsum';
  ...   
}

content is only working with ::before and ::after