Short answer: Alternative text does not allow links.
Long answer:
The alternative text should not be used to make subtitles. This is text used by browsers when the image is not available (this is the case for a blind browser, for example). Alternative text should be used to describe the image, where possible and relevant, or to indicate to the browser to disregard that image if it is not possible to display it.
That being said, you can get what you want by using the tags figure and figcaption or using tags div. In both cases you will need to use CSS or Javascript to hide/show as needed. In the case below I use CSS to hide and show as the user hovers over the image.
Case 1 - Using figcaption
The main advantage of using this method is to make your code more semantic, since these tags are actually used to create an image environment and its captions.
html
<!-- GSM FANS -->
<li class="item-thumbs span3 apps"><!-- Tipo do projeto -->
<!-- Imagem completa do trabalho -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="GSM Fans" href="_include/img/work/full/gsm.jpg">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<figure>
<img src="_include/img/work/thumbs/gsm.jpg" alt="">
<figcaption>Tenha rápido acesso ao fórum GSM Fans, atalhos para áreas relacionadas ao Windows Phone.
O aplicativo também conta com feeds de alguns sites de notícias tecnológicas.
* Pode haver falha na nova versão, <a href="download.com">faça o download das duas.</a></figcaption>
</figure>
</li>
<!-- GSM FANS -->
css
figure figcaption{
display:none;
}
figure:hover figcaption{
display:block;
}
Case 2 - div
The main advantage of using this method is probably the ease of implementing because you would need to make fewer changes. I propose to use a small change in HTML, converting the attribute "alt" into a div tag right after the image, and use CSS to style the tag that comes next to the image if it has the class "caption".
<!-- GSM FANS -->
<li class="item-thumbs span3 apps"><!-- Tipo do projeto -->
<!-- Imagem completa do trabalho -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="GSM Fans" href="_include/img/work/full/gsm.jpg">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<img src="_include/img/work/thumbs/gsm.jpg" alt="">
<div class="legenda">Tenha rápido acesso ao fórum GSM Fans, atalhos para áreas relacionadas ao Windows Phone.
O aplicativo também conta com feeds de alguns sites de notícias tecnológicas.
* Pode haver falha na nova versão, faça o download das duas.</div>
</li>
<!-- GSM FANS -->
css
img+.legenda{
display: none;
}
img:hover+.legenda{
display: block;
}
What element there is the legend?
– Renan Gomes
the contents within the alt
– Leonardo
And how does it become a legend? If you are using a plugin for this and not mention it, it is complicated.
– Renan Gomes
The bad thing is that I took a model ready and was editing according to my needs and taste.. this part refers to a Javascript (Fancybox, I don’t know how it works).. I only know how it works, when I click on the read it displays an image and the caption.. For me this would have nothing to do with the link.. You can see an example here > http://leonardovilarinho.com ... In the 'Work' area by clicking on the 'Thumbs''
– Leonardo
Let me get this straight, you want to put a link in the caption that appears when you go over the images?
– Jorge B.
No no, this caption that appears when passing the mouse in the image is the title, the alt is a caption that appears below the image (or above, etc.dendenying the css)
– Leonardo