Image hover over text

  • Hi folks. I’m a novice and I’m trying to redesign my work’s website using a WPFolio child theme.

    I’ve been asked to make images popup when hovering over linked text and I’d like the images to pop up in a separate section of the page (instead of next to the mouse or directly over other text) similar to this website (hover over any of the names): https://www.probertsongallery.com/component/artists

    I know their site is coded in Java but I’d rather do it in CSS. On another forum I found some code that does a similar image hover/popup(see bottom of post) but I don’t know how to adapt it properly to my WP code/theme.

    I’m trying to get my page: https://66.147.244.117/~petleyjo/artists/ to behave like the Peter Robertson Artist gallery page.

    I have all of my artists listed in <p> tags in a “page” on WordPress and I don’t know if I have to change them to <li> for this to work. Or if this is even possible between the page html and my child theme’s css.
    I have tried to change the class on my <p> tags for “Clayton Anderson” from <p class="thumbnail"> to <p class="anderson"> and set the CSS (in my child theme) to:

    p.anderson:hover {background-position: 0 0;}
  p.anderson span {background: url(images/bowen.jpg) no-repeat;}
  p.anderson:hover span {display: block;}

    but it doesn’t work. Can anyone help me?

    CSS code I’m trying to work off of that does what I want my site to do but I don’t know how to adapt it:

    [Code moderated as per the Forum Rules. Please use the pastebin]

    [Please post code or markup snippets between backticks or use the code button.]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter petleyjones

    (@petleyjones)

    Alternatively if there is an easily added Java option then I’d be happy to code to that too.

    Thanks in advance for all the help!

    try this one https://www.dynamicdrive.com/style/cs…e-gallery/P60/

    I’d recommend using jQuery for the hover actions – you could do it in CSS, but it will be VERY hacky.

    To start, I would make a custom page template. Add what’s in page.php to your template then create a new div, we’ll call it ‘#image-container’, that will hold the images on the right.

    Next, assign a unique id to each <p> item (yes, it is better to make it a list, but ps will work). Then you would use jQuery’s hover function for the rollover effect. The jQuery would look something like this:

    $('#anderson').hover(
    function() {
        $('#image-container').css('background-image','images/artwork.png');
    }, function() {
        $('#image-container').css('background-image','none');
    }
);
    Thread Starter petleyjones

    (@petleyjones)

    thanks @notlaura.

    Do you know how to solve the issue of calling images from my images folder?

    I have found code saying to insert<?php bloginfo('template_directory'); ?> but I’m not sure where to put that in relation to the rest of the code.

    Hmm that’s tough. I’m sure there’s a way to pass that into jQuery but if you don’t have time to research it, I’d just use absolute paths to the images. If you do have time to look it up, be sure to post your findings!

    Thread Starter petleyjones

    (@petleyjones)

    Ok, I’ve literally spent the whole day trying to understand jQuery and I’m not sure where to put the code you’ve provided?

    It doesn’t work in the new template, or functions, or the wp content directly.

    I’m confused because jQuery explains how to do it all in one document but through the wp theme I’m calling up content through php and not able to directly script to each of the links…what am I missing?

    Sorry to be a bother.

    Thread Starter petleyjones

    (@petleyjones)

    Nvm, I got it. Thanks!

    Thread Starter petleyjones

    (@petleyjones)

    Oh, in case anyone else is confused and trying to do this:

    I inputted the code in a separate .js file, loaded it to my server and called to the file and loaded that through the header.php file

    The code was slightly different but if anyone else is at a loss as to where to put the code, that’s where!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Image hover over text’ is closed to new replies.