Wordpress particle with option to 'swap' image on hover
-
-
- safeworld4women
- Elite Rocketeer
- Posts: 630
- Thanks: 26
- Website designer and Administrator
-
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 - for non-profit organisations, therapists, artists, local community groups and small businesses.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
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
- Elite Rocketeer
- Posts: 630
- Thanks: 26
- Website designer and Administrator
-
This message contains only secure information that is visible to MrT, moderators and administrators
- My wife and I design, build and maintain websites - for non-profit organisations, therapists, artists, local community groups and small businesses.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
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
- Elite Rocketeer
- Posts: 630
- Thanks: 26
- Website designer and Administrator
-
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 - for non-profit organisations, therapists, artists, local community groups and small businesses.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
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.051 seconds