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

How to create MouseOver photo overlay.


Video summary.

Change the active layer to MouseOver. Using the Rectangle tool, draw a black rectangle on the photo. Select a text tool and add sample text. Choose one of the heading style. Change the color to white and align to the center. Change the color of the rectangle to one of the Theme colors. Use the Transparency tool to set transparency of the rectangle to about 40%. Add a new line at the beginning of the text, and then insert the link symbol by selecting “Insert, symbol” in the menu. Align the text to the center. Select the text and semitransparent rectangle and press Ctrl-G to create a group. Right click on the newly created group and select “Website variants, Share with all variants” to copy it to other variants.

Ok. Switch to the “Wide” variant and enable the visibility of the MouseOver layer to check whether the elements were copied. Select the photo and the newly created rectangle with the text. Create a soft group using menu “Arrange, Apply Soft Group” or by pressing Ctrl-Alt-G. To check the Mouse Over effect, add any link. Preview page. Switch to the “Wide” Variant, move the overlay over the photo and stretch it to photo width. Hold Ctrl key and click on the rectangle to select it. Change its height. Also holding down the Ctrl key, click on the text and set it to the center of the rectangle. Now select the photo and elements above the photo, and then create a soft group (Ctrl-Alt-G). Repeat now all operations on the “Mobile” variant. Preview the page to see how the Mouse Over effect works. Change the width of the preview window to see all variants.


Leave a reply