Center rollover images

Dev Shed Forums Sponsor:

September 23rd, 2012, 08:13 AM

prikgek

Registered User

Join Date: Sep 2012

Posts: 6

Time spent in forums: 42 m 54 sec
Reputation Power: 0

Center rollover images

I would like to center some rollover images on one line, like on www.jansweijer.nl/home.

I've managed to figure out codes for rollover images (www.jansweijer.nl) and I for centering images as I want them (http://www.jansweijer.nl/centered-images)

Somehow, I cannot manage to combine the two. Could you help me do this?

Thanks in advance!

Code for rollover images:

Code:

<div id="parent"><img class="child1" src="http://www.jansweijer.nl/wp-content/uploads/2012/09/IDE.jpg"/><img class="whitespace" src="http://www.jansweijer.nl/wp-content/uploads/2012/09/white.jpg"/><img class="child2" src="http://www.jansweijer.nl/wp-content/uploads/2012/09/Photography.jpg"/><img class="whitespace" src="http://www.jansweijer.nl/wp-content/uploads/2012/09/white.jpg"/><img class="child3" src="http://www.jansweijer.nl/wp-content/uploads/2012/09/Graphic.jpg"/></div>

Code:

/**** Industrial Design ****/

.rolloverIDbutton a
{
display: block;
width: 165px;
height: 165px;
background: url('http://www.jansweijer.nl/wp-content/uploads/2012/09/IDbutton.jpg') no-repeat;
text-decoration: none;
float: left;
}

.rolloverIDbutton a:hover
{
background-position: -165px 0;
}

/**** Graphic Design ****/

.rolloverGDbutton a
{
display: block;
width: 165px;
height: 165px;
background: url('http://www.jansweijer.nl/wp-content/uploads/2012/09/GDbutton.jpg') no-repeat;
text-decoration: none;
float: left;
}

.rolloverGDbutton a:hover
{
background-position: -165px 0;
}

/**** Photography ****/

.rolloverPHbutton a
{
display: block;
width: 165px;
height: 165px;
background: url('http://www.jansweijer.nl/wp-content/uploads/2012/09/PHbutton.jpg') no-repeat;
text-decoration: none;
float: left;
}

.rolloverPHbutton a:hover
{
background-position: -165px 0;
}

Code for centering images:

Code:

<div class="rolloverIDbutton"><a href="http://www.jansweijer.nl/industrialdesign"> </a></div>
<div class="rolloverGDbutton"><a href="http://www.jansweijer.nl/graphicdesign/"> </a></div>
<div class="rolloverPHbutton"><a href="http://www.jansweijer.nl/photography/"> </a></div>

Code:

.whitespace
{  
    width: 35px;  
    height: 165px;  
    border: none;  
    display: inline-block;  
    background: url('http://www.jansweijer.nl/wp-content/uploads/2012/09/white.jpg') no-repeat;
    vertical-align: middle;  
}  

#parent {  
    width: 100%;  
    border: solid 1px;  
    text-align: center;  
    font-size: 20px;  
    letter-spacing: 35px;  
    white-space: nowrap;  
    line-height: 12px;  
    overflow: hidden;  
}  
  
.child1 {  
    width: 165px;  
    height: 165px;  
    border: none;  
    display: inline-block;  
    vertical-align: middle;  
}  

.child2 {  
    width: 165px;  
    height: 165px;  
    border: none;  
    display: inline-block;  
    vertical-align: middle;  
}  

.child3 {  
    width: 165px;  
    height: 165px;  
    border: none;  
    display: inline-block;  
    vertical-align: middle;  
}