immage capton tooltip hover effect

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    Layout and style your HTML so the tooltip on hover content looks the way you want, all the time without a hover effect for now. For the element that contains all of the tooltip hover content, include a class attribute that can be targeted with the :hover CSS pseudo-selector.

    Use that class to style the containing element with display: none;. Now no hover content will be shown. Add another similar rule using :hover that displays the element as a block. Something like:
    .tooltip:hover { display: block; }
    Assuming the class attribute we’re targeting is “tooltip”.
    https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

    Thread Starter dune1982

    (@dune1982)

    Hello bcworkz,
    thank you I get that. I got that working with overlay.

    But what I would like to have is that the title is always visible and at text below the title is only visible on hover. When not visible the text should not make the ovelay as big as it is on hover.

    This is what i have now.

    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}

.container {
  position: relative;
  width: 50%;
  max-width: 300px;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute; 
  bottom: 0; 
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1; 
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
  opacity: 1;
}

.container:hover .overlay {
  padding: 20px 0px 100px;
}

</style>
</head>
<body>

<h2>Image Overlay Title</h2>
<p>Hover over the image to see the effect.</p>

<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">My Name is John <p id="onlyonhover">text on hover</p></div>
</div>

</body>
</html>
    • This reply was modified 3 years, 11 months ago by dune1982.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘immage capton tooltip hover effect’ is closed to new replies.