Code explanation

Hi, I am doing a project for my college class and I am new at this. I want my web page to have images pop up when someone hovers over their thumbnail. I found an example on how to do this, but this helps me only half of the way because I have to be able to explain everything I use in my project. So I would be very grateful if anyone can explain this code to me.

CSS code is:

.thumbnail{
position: relative;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail span{
position: absolute;
left: -1000px;
visibility: hidden;
}

.thumbnail span img{
border-width: 0;
}

.thumbnail:hover span{
visibility: visible;
bottom: 75px;
left: -240px; 
}

Code (markup):

And HTML part is:

<a class="thumbnail" href="#thumb"><img alt="image" src="image" width="100px" height="62px" border="0" /><span><img alt="image"  src="image" /><br /></span></a>

Code (markup):

 

This requires you to know what the CSS is doing. I will assume you have basic CSS knowledge. The hover effect is created by the .thumbnail:hover sections of your stylesheet. The :hover specifies that those sections should be observed when any element that is within the class "thumbnail" is hovered over. The visibility: visible; setting will then come into effect which tells the browser to make all <span>s of an element that is within the class "thumbnail" to become visible. All :hover effects are undone when you are no longer over that section.

 

Thanks. Just one more question. What is the difference between .thumbnail, .thumbnail span, .thumbnail span img and .thumbnail:hover span. I don't understand why do I have to define each one separate.

 

Those are all forms of CSS selectors. I recommend you check out that link as they explain it best.

.thumbnail refers to all elements of class "thumbnail". .thumbnail span refers to all spans that are descendants of a "thumbnail" class element. .thumbnail span img refers to all imgs that are descendant to a span that is descendants of a "thumbnail" class element. .thumbnail:hover span refers to all spans that are descendant to a "thumbnail" class element that is being hovered over.

 

I think I understand now, thanks.