Rollover link with CSS

  • Unknown's avatar
    acritch2013 · Member ·

    Hi!

    I was looking to do a rollover link and I use Prophoto5. I am a novice CSS’er and I managed to style 8 pictures to become 4 rollover links. I must have missed something because the images are rolling over properly like I wanted but the links are not working. Instead it just links the word and puts it in in the top left corner. Is there anyway someone can help me with the code?

    This is the CSS used …

    .imgBox {
width: 900px;
height: 626px;
background: url(http://www.emmamariephotography.ca/wp-content/uploads/2014/06/menu-grid.png) no-repeat;
background-size: 94% 94%;
}

    .imgBox:hover {
    width: 900px;
    height: 626px;
    background: url(http://www.emmamariephotography.ca/wp-content/uploads/2014/06/menu-grid2.png) no-repeat;
    background-size: 94% 94%;
    transition-delay:1s;
    }

    This is the html used …

    <div style="position: absolute; top: 30px; ">
<div class="imgBox">
<a href="http://www.emmamariephotography.ca/about-you" class="imgbox" title="About You!" >About You!</a>
</div>
</div>

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    timethief · Member ·

    Hi there,

    I use Prophoto5.

    http://www.emmamariephotography.ca/ is NOT hosted by WordPress.COM and We provide support only for blogs being hosted WordPress.COM, not for WordPress.ORG software installs. You are posting to the wrong support forum.

    WordPress.com and WordPress.org are completely separate and different http://support.wordpress.com/com-vs-org/

    If you don’t have a username account at WordPress.ORG click http://wordpress.org/support/ and register one on the top right hand corner of the page that opens, so you can post to the support forums there and receive advice from WordPress.ORG bloggers.

  • Unknown's avatar
    designsimply · Member ·

    I must have missed something because the images are rolling over properly like I wanted but the links are not working. Instead it just links the word and puts it in in the top left corner.

    I tested the code you provided, and it seemed okay to me. So it’s possible the problem is a conflict with something else on the page you’re working with and not just the code you’ve posted here as an example. In order to tell, someone would need to have access to look at the rollover on the web page in action. I tried to take a look at emmamariephotography.ca but I saw a maintenance notice.

    I also see that http://www.emmamariephotography.ca/ is using WordPress, but it is not hosted here at WordPress.com. You are also using a professional theme, Prophoto, and so the first best place to ask for support will be from the theme author.
    http://www.prophoto.com/contact/

    However, since you’re working on something much more customized, they may not provide support for that kind of thing. You may want to consider hiring help to make the changes you’re interested in. The prices can be pretty reasonable, and we have a contact form at http://en.support.wordpress.com/customize-my-site/request-theme-customization/ if you’re interested in checking it out.

  • The topic ‘Rollover link with CSS’ is closed to new replies.