Create thumbnails with text in HTML/CSS

Question

I am very new to HTML or CSS, and maybe what I'm asking is very silly. My doubt is if it's possible to create a thumbnail displaying a picture and a title, and then when you click on it, a 'box' appears with the picture and a large text (some way similar to Safari's Reader function, or others). Is it possible?

As I said earlier I'm just starting with HTML and CSS.

Answer 1

This is indeed possible.

First we create a div, then we use css to choose the background properties, and to make it fit.

Here's the code:

<div class="img" style="
    overflow: hidden;
    height: 50px; <!-- Set the size of the div -->
    width: 50px;
    background: url(http://blog.moovweb.com/wp-content/uploads/2013/04/stackoverflow-logo.png);
    background-size: 50px 50px; <!-- Set the size of the image -->
    background-repeat: no-repeat;">
</div>

Notice how the image is warped to fit the box.

You can add the text by just typing it in the div, or by creating a new one to reposition your text.

Hope this helps!