Images (5 min)
Completion requirements
01 Getting Started
This tutorial covers styling images, including:
- Image parts.
- Image styling properties.
- Overlay properties.
- Creating a rollover effect.
02 Image Parts
Inserting images into your project can create visual interest for users, convey information, and support the overall look and feel of your project.
Since the image is already a visual element, your styling will affect the alignment, size, and border.
Since the image is already a visual element, your styling will affect the alignment, size, and border.
03 Image Styling Properties
You can control:
- The opacity of your image.
- Ensure that your image will fit inside the container.
- Choose how the image will display if it is only partially in the container.
04 Overlay Properties
You can create an effect or image on top of your image.
If your image is interactive, you can set a default, hover, and clicked overlay styling.
If your image is interactive, you can set a default, hover, and clicked overlay styling.
05 Roll Over
Another option to make your image elements interactive is to create a rollover effect. This images the image to another when the image is in default, hove, or clicked state.
Navigate to the image settings menu. Click the change image buttons to configure three different images.
Navigate to the image settings menu. Click the change image buttons to configure three different images.