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