jekyll-friend jekyll-friend - 7 months ago 17
HTML Question

Image-button with css

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

nice button

(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

HTML

<a class="modern_art" href="...">Modern Art</a>


CSS

.modern_art{
background-image: url(/pictures/modern_art.jpg)
/* or something similar */
/* more instructions */
}


By now, the best I have done is to place the picture and afterwards the name with
::before
, but this is not enough to get a nice button. What would you recommend me?

Answer

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.

UPDATE

I have updated the code to transition back to the normal state, rather than instantly getting back to it. Fiddle here