Center rollover images

  • jobjansweijer

    (@jobjansweijer)


    13 years, 8 months ago

    It is probably a very unintelligent question, but I can’t figure it out…

    I have three rollover images on my homepage, which I want to center horizontally, and I want to add some white space in between them. The current page is like this: http://www.jansweijer.nl, and I want it to be something like this: http://www.jansweijer.nl/home (but then with 3 images)

    The code I’m using in CSS is now this:

    /* /////////////////////////////////////////////////////////////////////
//  Menu rollover images
/////////////////////////////////////////////////////////////////////*/

/**** 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;
}

    And on my page I’m using this:

    <div class="rolloverIDbutton"><a href="http://www.jansweijer.nl/industrial-design"> </a></div>
<div class="rolloverGDbutton"><a href="http://www.jansweijer.nl/industrial-design"> </a></div>
<div class="rolloverPHbutton"><a href="http://www.jansweijer.nl/industrial-design"> </a></div>

    Thanks in advance!

Viewing 1 replies (of 1 total)
  • Thread Starter jobjansweijer

    (@jobjansweijer)

    13 years, 8 months ago

    I’ve now managed to center three images as I wanted using the code below (see http://www.jansweijer.nl/centered-images/). Is there any way I can combine the two, and make the centered images rollover images now?

    #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;
}

    HTML:

    <div id="parent">
<img class="child1" title="IDE" src="http://www.jansweijer.nl/wp-content/uploads/2012/09/IDE.jpg" alt="" width="164" height="162" />
<img class="child2" title="Photography" src="http://www.jansweijer.nl/wp-content/uploads/2012/09/Photography.jpg" alt="" width="164" height="162" />
<img class="child3" title="Graphic" src="http://www.jansweijer.nl/wp-content/uploads/2012/09/Graphic.jpg" alt="" width="164" height="162" />
</div>

    [ Please do not bump, that’s not permitted here. ]

Viewing 1 replies (of 1 total)

The topic ‘Center rollover images’ is closed to new replies.