Shaped Images

Placeholder Picture
Placeholder Picture
Placeholder Picture
Placeholder Picture
Placeholder Picture
Placeholder Picture
Placeholder Picture

Shaped Images

There is a website here that helps you creating images with odd shapes. Just select a shape and copy the CSS code. To apply it to a picture in SD, give that picture an ID (e.g. 'mypic' without the inverted commas) at the top of the Styles panel. Then on the Element panel, where it says 'Enter your HeadCode for this element', click on Edit and enter the code and the picture ID like this:

#mypic { enter between these braces the code you copied }

This code can be added directly to each image or, as I have done here, they can be added to the holding container. The ID of each image will make sure that the correct item is addressed.

The different shapes do not show when working with them in SD, but they will show in preview, after export and on the web.

This does not work in IE11.

The image bottom right comes from Pixabay.

Placeholder Picture

Download this component

This component can be used both for 'mobile-up' and 'desktop-down'.