0
Welcome Guest! Login
0 items Join Now

Wordpress particle with option to 'swap' image on hover

    • safeworld4women's Avatar
    • safeworld4women
    • Hero Rocketeer
    • Posts: 481
    • Thanks: 14
    • Website designer and Administrator

    Wordpress particle with option to 'swap' image on hover

    Posted 4 months 3 weeks ago
    • Hi
      I was wondering if there is a WP particle which allows the thumbnail image to change to another one on hover?
      I am using the Mosiacgrid particle which I have adapted slightly so that the image links to another page when it is clicked on.
      What I would like to do is to integrate a hover facility on the image which would show a different image.
      In the mosaicgrid.yaml I have created a new option
      .imgURL:
      type: input.text
      label: Image Link
      description: Add Image Link.

      Which allows me to add an extra image to each item.
      Now I am wondering how I could get this to work in the html.twig file.
      If there is any other particle which has this facility or something like it I could see if I can adapt that.
      Any suggestions?

      Best

      Andrew
    • My wife and I design, build and maintain websites as volunteers - for non-profit organisations. And occasionally for therapists, musicians and artists.
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 87219
    • Thanks: 11262
    • Web Designer/Developer

    Re: Wordpress particle with option to 'swap' image on hover

    Posted 4 months 3 weeks ago
    • Please post url, superuser ID and password in the secure tab of your reply and I will look for you.

      Please provide ftp login too.

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    • safeworld4women's Avatar
    • safeworld4women
    • Hero Rocketeer
    • Posts: 481
    • Thanks: 14
    • Website designer and Administrator

    Re: Wordpress particle with option to 'swap' image on hover

    Posted 4 months 3 weeks ago
    • This message contains only secure information that is visible to MrT, moderators and administrators
    • My wife and I design, build and maintain websites as volunteers - for non-profit organisations. And occasionally for therapists, musicians and artists.
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 87219
    • Thanks: 11262
    • Web Designer/Developer

    Re: Wordpress particle with option to 'swap' image on hover

    Posted 4 months 3 weeks ago
    • Ok, rather than me doing it for you I'll explain what needs to be done for you to have a go yourself.

      1. In the same ways that the existing image is rendered in the TWIG file - render the second image using an IMG tag too - but give it a class name that makes it easy to target in CSS. Give the existing IMG tag a class too to make that easy to target with CSS too. So, the look at the front end and hopefully you will see the TWO images rendered, one beneath the other. If that works proceed to the next step.
      2. Add some custom CSS to hide the second image in normal state and hide the first image in hover state (use display: none) and add the hover pseudo selector in your CSS selector for the container that contains the two images (i.e. .g-mosaicgrid-image ). Now test that - you should now only see one image at a time and the image apparently swap out.

      Have a go and I can help if you get stuck.

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    • safeworld4women's Avatar
    • safeworld4women
    • Hero Rocketeer
    • Posts: 481
    • Thanks: 14
    • Website designer and Administrator

    Re: Wordpress particle with option to 'swap' image on hover

    Posted 4 months 1 week ago
    • Hi Mark
      Feeling very embarrassed - your reply slipped my attention.
      Will look at this over the weekend.
      Much appreciated

      Andrew
    • My wife and I design, build and maintain websites as volunteers - for non-profit organisations. And occasionally for therapists, musicians and artists.
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 87219
    • Thanks: 11262
    • Web Designer/Developer

    Re: Wordpress particle with option to 'swap' image on hover

    Posted 4 months 1 week ago
    • Ok please let us know the outcome or if you need more help.

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.

Time to create page: 0.069 seconds