How to get a start picture in CSS thumbnail gallery

Question

I found a Stack problem, with a nice gallery solution. I used the code to make my own too. The structure working perfectly fine and I made it fully dynamic but I have a small problem with it.

Here is a Gallery solution from @Seika85:

Link from the original

PROBLEM: I cant get the start text replaced to the IMG1 in dl

I would like to replace the "Hover a thumbnail" to the first full size picture in the gallery. When you open the page the dl is empty and first get loaded only when you go over or click on a thumbnail.

Example:

I would like to get it loaded like this

instead of that one when i open the page.

The text arena code before get the first picture loaded:

dl.container:before {
content: "Hover a thumbnail";
position: absolute;
font: 48px Tahoma;
display: block;
top: 150px;
color: #d8d8d8;
text-shadow: 1px 1px 3px #666;
width: 100%;
text-align: center;}

I hope I can get a solution to make it work, Thanks.

Answer 1

Just add:

dt:first-child + dd {
  opacity: 1;
}

To make the first one "active/visible" by default.

Updated Fiddle