HTML – Using CSS with Pictures

There are many CSS properties that can be used to change the look and feel of your web graphics. You can use CSS to:

• Position a picture (e.g. center a picture or add a margin around your picture)
• Resize your picture (width, height) or make your picture responsive (width/height adapt to the size of the screen)
• Add border to a picture
• Add a border-radius to create rounded corner to a picture
• Add a shadow effect to a picture
• Rotate a picture
• Change the opacity of a picture

Investigate the use of CSS in the examples provided below. Then reuse some of these skills to update your pictures on your own webpages.

See the Pen Using CSS with Pictures by 101 Computing (@101Computing) on CodePen.

Roll over effects and animation effects

To draw the attention to your web graphics you may want to add animated rollover effects. This is a great approach to let the web user know when a graphic such as a web button can be clicked on (e.g. hyperlink).

See the Pen Rollover animation effects on pictures by 101 Computing (@101Computing) on CodePen.