Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Using CSS to change image while hovering over text

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #45263
    calebweeks
    Member

    Hello CSS-Tricks,

    I fear that I am asking a question similar to the [Solved] How to make hovering over one div to trigger changes in another div?, but I didn’t quite get the solution in my situation.

    I am working in WordPress and building an art gallery website.

    My particular question of “Hovering over text and changing the image” comes into play when building the “Artists” Page: hover over their names and the image changes. An example of the idea for reference is the Peter Robertson Gallery. Our particular page is here (with no image changing at the moment): leiperscreekgallery.com/artists

    A few key differences is that our design/theme is responsive and we are putting the “rotating” image area in the middle between two columns of artists (text) evenly divided on either side. It’s a 3 column layout: 1) text column/list on left side, 2) image in the middle, 3) text column list on right side.

    Do you think you guys can help? I’d be grateful for anything, even pointing me in the direction of the tutorial that may already exist. My strongest knowledge is CSS and HTML. Javascript is a no-go (at this moment) as is jquery. I’ve searched and searched but am not sure I’ve found.

    I kind of wish there was a plugin that instead of using “thumbnails” to change the image, it could be text and the text could be styled on either side of the image. I’ve also attempted it with “tooltip” plugins like “Tipsy” but I need the text to be a link while showing an image on hover. I imagine CSS can make it happen.

    I took a look at CodePen and want to offer it that way but I might just send the link in this case as I’m in the WordPress editor primarily: leiperscreekgallery.com/artists.

    Thanks for any help and assistance – I am in need of it! Thanks guys for whatever you can offer.

    #137116
    Alen
    Participant

    The page you referenced uses inline JavaScript. And **it’s quite messy**. I’m pretty sure there are better alternatives. One would be to use data attribute on the artist name, then parse that data with JavaScript (jQuery) and just load the designated image in the appropriate place. If your site is responsive, create a placeholder div that behaves the way you want it and just use max-width on the images inside.

    #192637
    DamonA
    Participant

    Hey Caleb,

    how did you solve this in the end?

    Am trying to do this myself and have spent hours getting nowhere…

    Ta

    D

    #192640
    Paulie_D
    Member

    @Damona

    This is a very old thread and the original poster may not be around.

    You would be better served by creating a new thread, demoing a reduced case of your code in Codepen.io and detailing your specific issue.

    In general though, these type of situations require Javascript…but until we seethe code, we can’t help you specifically.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.