Various Styles Applied to Images:


In this exercise we will experiment with CSS properties that change the appearance of the image.

Image Opacity

image of a bald eagle1

The CSS opacity property makes your image appear transparent to whatever is beneath the image.
Experiment with various levels of opacity in the CSS. A fun effect is to add a hover where the opacity is less.

BALD
EAGLE!

Opacity is often used when you wish to have text over an image. The reduced opacity helps the readability of the text. In this example the opacity is within a box placed over the image. This allows the text to appear at 100%.

Image Filter

image of a bald eagle2

The css filter property can change the appearance of a color image. Values include: grayscale, sepia, brightness, contrast, and more.

To see examples of these effects click here.

Image Mask Linear Gradient

image of a bald eagle3

Gradients can be used to mask a portion of the image. Use solid black and white, white areas show the portion of the image whereas the black areas hides the portion of the image. You can use liner OR radial gradients. Experiment with changing linear values.

Image Mask Radial Gradient

image of a bald eagle4

This mask uses a radial gradient at 50%

Background Blend Mode

The background-blend-mode property defines the blending mode of each background layer (color and/or image). Blending modes in CSS can only apply to a background image. In the CSS class "blend1" experiment with varous blending modes including: color, color burn, lighten, darken, difference, inclusion, hard-light, and more.

To see more examples of blackground blend mode click here.

Mix Blend Mode

CSS Mix Blend modes are similar to Blending modes. The mix-blend-mode property specifies how an element's content should blend with its direct parent background.

image of a bald eagle5

To see more examples of blackground Mix Blend mode click here.

Below are examples of how CSS properties can be added to images that enhance the image and create visiual interest .

image of a bald eagle5

The photo above uses the CSS border-radius property of 50% to create the circular effect.
Play around with different radius percentages in the SCSS file to create different appearances.

Image as a Link with Hover effect.

image of a bald eagle6

Images can also be links. You can add a border, and style a hover any way you like.