I would like to learn how to do 'nice buttons' where the picture is added with css. For instance suppose that I want something like the following
(that is, the picture and the text are together and the whole picture is the link. You may see http://www.geogebra.org/team for something with the same spirit). The question is to do so as follows
<a class="modern_art" href="...">Modern Art</a>
/* or something similar */
/* more instructions */
try this one.
In this fiddle you can find something similar to what you ask. Just make an anchor tag as a thumbnail and then put your content inside it. Something like this one:
<a href="#" class="thumbnail"> <figure> <img src="http://i.stack.imgur.com/g1Ce8.png" alt="bg" /> <figcaption> <div> Caption here </div> </figcaption> </figure> </a>
Then I'm using positioning and CSS3 transitions to hide and show the caption.
I have updated the code to transition back to the normal state, rather than instantly getting back to it. Fiddle here