How to make a tooltip over an image?

Joined
Feb 15, 2021
Messages
99
Reaction score
0
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!
 
Joined
Jul 4, 2023
Messages
376
Reaction score
42
What do you think in that way?
[ working code on-line ]
HTML:
<div></div>
CSS:
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);
}
 
Last edited:
Joined
Jul 4, 2023
Messages
376
Reaction score
42
Last example, little bit different way ... ;)
[ working code on-line ]
HTML:
<div>
  <div class="tooltip">Lorem ipsum dolore</div>
</div>

<div>
  <div class="tooltip">Lorem ipsum dolore</div>
</div>
CSS:
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);
}
 
Joined
Jul 4, 2023
Messages
376
Reaction score
42
Update about mistake in last post.
CSS:
div .tooltip {
  --gradient-color: rgba(0, 255, 40, .45);
  content: 'Lorem ipsum';
  ...   
}

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

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,794
Messages
2,569,641
Members
45,355
Latest member
SJLChristi

Latest Threads

Top