I’m redesigning a website using blocs and my client is wanting to add a feature where when you mouseover one image another image takes it’s place as long as the mouse is over it. I know very little about code (which is why I’m loving Blocs) but I see no easy way to add this thus far. Thanks for the assist.
Hi @stevew
Here’s a quick hack that achieve this.
Make a blank transparent png with the same size as the images.
Use the same size on all images.
Cheers / Johny
4 Likes
totally worked! An answer AND a tutorial? Perfection!
steve
1 Like
I like your posts. 
1 Like
@Ben Thanks pal, great to hear. 
Otherwise it’s not worth putting in the effort.
Cheers / Johny
1 Like
As of today, that video link is dead.
I suggest uploading videos to YouTube as Unlisted.
I will try to post screenshots later, but the process for image changing rollovers is as follows:
Step 1 - in your image creating app, make a file the size of your button. Make 3 different layers, each saved as a png or gif. 1 is empty. The second is your “normal” state. The thirds is your rollover state.
Step2- in blocs create an image bric.
Step3- import the empty button image and assign it to the image bric
Step4- create a class for the image, perhaps call it Rollover
Step 5- edit the class. (In the class editor there is a selection in the upper right corner of the window.) First to edit is the “normal” state. Click in the paintbrush icon, and you will see an empty rounded square labeled image. Click on this and find your “normal state” button image. Do not click on anything in the asset manager it brings up, this will potentially change out the empty image, which is necessary for this to work. But select it from the finder.
Step 6- edit hover state (under drop down, top right, class editor). Click again on the paintbrush. This time again click on the rounded square image box and choose your rollover image.
Step 7- close class editor and test.
This process worked for me, I might have missed a few details I am away from my computer. Hope this helps!