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): http://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 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:
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:
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!
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?