Name on the image when mouse passes css

Question

Name on the image when mouse passes css

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

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

css

asked by anonymous 21.07.2017 / 04:41

2 answers

How to submit a form and after submission load a div with ajax Scope of a service

score 1 · Answer 1

Basic example with a few changes removed from W3 Schools

In class .text you have the option to change the color, font, size and apply any and any style you think 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 as many other 'common' effects in W3's HOW TO session.

.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>

score 0 · Answer 2

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

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

The title attribute causes the image to use the browser's own tooltip , while the alt attribute is used when the image can not be rendered (by error at loading or when the page loads in non-graphical browser).

In addition to requiring little code, be cross-browser by default and not interfere with the style sheet, this way ensures your page is more accessible to visually impaired people. Browsers can read aloud the text of the alt attribute when the person selects the image, for example.

Now, if you really need to embellish the text, Bsalvo's answer has the most appropriate solution.