Rollover images

  • Resolved jobjansweijer

    (@jobjansweijer)


    13 years, 8 months ago

    Hi!

    For the last few hours I’ve been trying to get rollover images working on my wordpress site, with 0 effect so far. Which is pretty frustrating…

    I’ve been reading some similar topics, and understood that I have to add something like this to my stylesheet: (I added it to my child theme)

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

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

    And this to the HTML of my page:
    <div class="testrollover"><a href="http://www.jansweijer.nl/industrial-design"> </a></div>

    The image I uploaded is 330 px wide, with on the left 165 pixels my original image, and on the right the image I want to appear on rollover. When I reload my homepage however, only the image link appears (in text) what am I doing wrong?
    Thanks in advance!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Phil

    (@owendevelopment)

    13 years, 8 months ago

    Looks ok to me, image exists etc.

    Can you provide link to the page in question.

    Thread Starter jobjansweijer

    (@jobjansweijer)

    13 years, 8 months ago

    Hi Phil,

    Thanks for your reply.
    It’s supposed to be here:
    http://www.jansweijer.nl/

    The first three links are just placed as text, but the 4th link seems to appear as a result of the code:

    http://www.jansweijer.nl/wp-content/uploads/2012/09/Photomanipulation-Rollover.jpg
http://www.jansweijer.nl/wp-content/uploads/2012/09/Photomanipulation.jpg
http://www.jansweijer.nl/industrial-design
http://www.jansweijer.nl/wp-content/uploads/2012/09/IDE_Test.jpg

<div class="testrollover"><a href="http://www.jansweijer.nl/industrial-design"> </a></div>
    Thread Starter jobjansweijer

    (@jobjansweijer)

    13 years, 8 months ago

    Whoops! That’s incorrect… All four links on the homepage are as they should be. There’s just no image appearing…

    Phil

    (@owendevelopment)

    13 years, 8 months ago

    You see this:

    (optional values you can add: Theme URI, Author URI, Version)
*/

    Remove this */ and move it up to just after 

    /*
Theme Name:     Jansweijer Theme
Description:
Author:         admin
Template:       reveal
*/  <-- place it here

    That */ marks the end of comments, so your CSS code is currently commented out. Doing the above should get it working.

    Hope this helps.

    Phil

    Thread Starter jobjansweijer

    (@jobjansweijer)

    13 years, 8 months ago

    Jep, it helped! Thanks for your effort, I appreciate it!

    Phil

    (@owendevelopment)

    13 years, 8 months ago

    No probs.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Rollover images’ is closed to new replies.