I am trying to recreate the format of a site I have previously hand coded (long winded so looking for a smarter way of creating) and need a pointer please.
The layout of a page will be a number of rows each with 3 columns - forming an image grid (maybe 20 or so images).
Each image will have an alternate rollover image when hovered.
Therefore I need to surround each image pair with
<div class=“crossfade”>
</div>
and I need to assign
“regular” and “rollover” classes to the pair of images.
I am not sure how to do this using the HTML function within Page Builder (if I can) or whether I can manually add the code and it will be validated by Page Builder.
Hi Paul! Thanks for reaching out. I am trying to think about the best way to do this. You will want to use the HTML module and some additional CSS or Javascript to handle the rollover. I would maybe try making a div for the image in the HTML module. Then set the background image of that div and the rollover with CSS (change the background image on the hover state). If you do that route, you could load all the images up in a hidden div tag. That way, when you do the image rollover the images will all be preloaded. Let me know if that sounds like it will work!
Robby,
Thanks for your reply.
Forgive me but I dont see how to surrount the image in the column with my div using the html module.
I have tried to split the code (<div> then </div>)and drag the module first above the image then below to make the code span the image but seems not to work.
Could you advise the correct method for this first step?
Or does all the image stuff have to be in css related to the div?
If so it just means i need lots and lots of unique divs!
Paul, sorry I didn’t explain well. You won’t be able to use multiple HTML modules to wrap tags around an image module. I was thinking you could put a div in an HTML module, then target that div with CSS to set the background image and the hover image. If you did this, you (or your client) would still be able to drag-drop the module around on the page. Unfortunately, you wouldn’t be able to use the photo module in this scenario.
You might be able to use the photo module for the original image. Then, target each photo module and set the roll-over with CSS. This might take a bit more time. Regardless, there won’t be any way for the user to upload/set the rollover image from within the page builder. It will have to be done with JS or CSS. Sorry about that.
Now that I am curious =D, is it possible for me to see the page you are rebuilding?