# Rollover.css

**URL:** <https://forum.kirupa.com/t/rollover-css/214737>\
**Category:** Uncategorized\
**Created:** [January 31, 2007, 4:34pm UTC](https://forum.kirupa.com/t/rollover-css/214737 "2007-01-31T16:34:19Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Marja](https://avatars.discourse-cdn.com/v4/letter/m/c67d28/32.png) [@Marja](https://forum.kirupa.com/u/Marja)\
**Post date:** [January 31, 2007, 4:34pm UTC](https://forum.kirupa.com/t/rollover-css/214737/1 "2007-01-31T16:34:19Z")

</div>

Hi… I’m new here and my name is Marja. I live in the Netherlands so please forgive me any language slip of my keyboard.  
I’m also new to css but I love to learn it because it finally didn’t 'cause any popup warnings in my windows. I have tried to use the rollover.css tutorial but it only works for 1 image… and it work fine!!! But… I’ve about 6 images to do, so how do I have to change the css file _and the_ html file?

This is the original css which work fine:  
/\* CSS Rollovers \*/  
#example{  
height: 100px;  
width: 101px;  
text-indent: 10000px;  
overflow: hidden;  
background: url(eng.jpg) top left no-repeat;  
display: block;  
}  
#example:hover{  
background-position: bottom left;  
}

It’s related to this part of the html:  
\<div\>  
\<a href="/epoems.html" id=“example”\>\</a\>  
\</div\>

Can any of you css-Masters tell me how to put more than 1 image to this code?

Peace,  
Marja