Hover text assistance-CodePudding

<div >
  <div >
    <div >  
      <a href="">
        <img src="img/member_login1.png" height="40" width="40" >
      </a>
    </div>

I am attempting to show text titled "LogIn" when one hovers over the member_login image

CodePudding user response：

All you need is the title attribute!

<div >
  <div >
    <div >  
      <a href="">
        <img 
          src="https://www.nasa.gov/images/content/296673main_scn1-226.jpg" 
          title="Hover to see me!" >
      </a>
    </div>
  </div>
</div>

CodePudding user response：

with my code this might help..

body{
  background-color: #000;
}

.container{
  display: flex;
  justify-content: space-around;
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

figure{
  width: 5rem;
  height: 5rem;
  clip-path: circle(50% at 50% 50%);
  cursor: pointer;
  position: relative;
}

img {
  width: 100%;
  height: 100%;
  transform: scale(0.75);
  transition: all 0.4s ease;
}

figcaption{
  color: white;
  font-size: 0.9rem;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 2px;
  transition: all 0.6s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
}

figure:hover img{
  transform: scale(0.5);
  filter: blur(4px) brightness(70%);
}

figure:hover figcaption{
  opacity: 1;
  transform: translate(-50%, -50%);
}

<html>
<head>
  <title>Membuat Efek Hover Pada Image Caption</title>
</head>
<body>
  <div >
    <figure>
      <img src="https://www.inpows.com/media/2020/01/cropped-Logo-Inpows-2.png">
      <figcaption>
        Login
      </figcaption>
    </figure>
  </div>
</body>
</html>

CodePudding user response：

If you want more control over the styling of the hover text, use a span or something and set it to display: none when the preceding image is not being hovered.

.social {
  position: relative;
}

.tooltip {
  position: absolute;
  top: 2px;
  left: 2px;
  color: saddlebrown;
  background-color: white;
  padding: 2px;
  z-index: 2;
}

img:not(:hover)   .tooltip:not(:hover) {
  display: none;
}

<div >
  <div >
    <div >  
      <a href="">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/LotusBud0048a.jpg/420px-LotusBud0048a.jpg" height="40" width="40" >
        <span >LogIn</span>
      </a>
    </div>
  </div>
</div>