How to create MouseOver overlay on images. –
Spring SALE. -20% with coupon code "SPRING"

How to create MouseOver overlay on images.


Video summary.

Set the MouseOver layer to active and enable its visibility. Draw a black rectangle over one of the photos. Insert a symbol by selecting from the menu “Insert, Symbol”. Search for link symbol. Change link color to white and move it to center of the square. Use the ellipse tool to draw a circle. Set the line color to white and clear the fill. Position the circle in the center of the square. Adjust the size of the elements. Now select all and press Ctrl-G to create a group. Move elements to the photo. Select only the black square by clicking on it while holding the Ctrl key. Choose transparency tool by pressing F6. Change transparency type to round. Click on the center handle and set transparency to about 60%. Click on the outer handle to set transparency to about 40%. By dragging with the right mouse button, make a copy for other photos. Select all three elements with photos, and then select from the menu “Website variants, Share with all variants”. Now make soft groups. Select each element and press Ctrl-Alt-G. Repeat for each photo. Now select all three photos and set the link type to Popup Foto. Adjust the size of the displayed photos and other popup window options. Test it. Switch to the next variant and enable visibility of the MouseOver layer. Resize elements to fit the photos. Select each of the photos and press Ctrl-Alt-G to create a soft group. Check if everything works OK. Now “Mobile” variant. Enable visibility of the MouseOver layer. To properly scale the elements, you must first scale the semitransparent rectangle and then move the icon. Hold Ctrl and click on the rectangle. Resize it. While holding down Ctrl-Shift, click on the icon and on the circle. Move them to the center. Do the same with other photos. Check if it works by turning on Preview page. Remember to also make soft groups in other variants.


Leave a reply