Name over image when mouse passes css

Asked

Viewed 1,649 times

1

I need to put the name of the image on it when the mouse passes. The same effect we have using :Hover when the mouse goes over. I want to make the image name appear, put bold, font size, etc.

css
  • 4

    Take advantage of being a new user and do the [tour] to learn the basics of how the site works. Then press [Edit] and add your code, describing what the difficulty was found.

2 answers

1

Basic example with a few changes taken from the site W3 Schools

In class .text you have the option to change the color, font, size and apply any style you find necessary.

.text {
  color: #008CBA; // Muda a cor do texto
  font-size: 30px; // Muda o tamanho da fonte
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

This is just one of the styles created by the W3 team. There are some other Hover effects that you can find here.

We can find not only this but many other 'common' effects in the session HOW TO of W3.

.container {
  position: relative;
  width: 50%;
}

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

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #f2f2f2;
}

.container:hover .overlay {
  opacity: 0.8;
}

.text {
  color: #008CBA;
  font-size: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
<body>
<div class="container">
  <img src="http://illustratd.com/uploads/GNyhX565Mo__450x450.jpg" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Sorriso.jpg</div>
  </div>
</div>
</body>

0

If bold formatting is not so important, you can add attributes alt and title image. I.e.:

<img src="imagem.png" title="Ó o gás!" alt="Pessoas dançando para uma meme.">

The attribute title causes the image to use the tooltip browser, while the attribute alt is used when the image cannot be rendered (by error when loading or when the page is loaded in non-graphical browser).

Besides requiring little code, be cross-browser by default and do not interfere with the style sheet, this form ensures that your page is more accessible to people with visual impairment. Browsers can read the attribute text aloud alt when the person selects the image, for example.

Now, if you really need to spruce up the text, the response of the Bsalvo has the most appropriate solution.

  • I think you meant the attribute: title, no? The alt does not create the desired effect.

  • 1

    @Leonfreire is right. Thank you, I will adjust the answer :)

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.