W3.CSSLesson 39Free preview
W3.CSS Images
This lesson is part of W3.CSS · All levels
Summary
It provides a simple utility class for images to appear neat and responsive across screen sizes. Its main class, .w3-image, makes the image fill the width of the container so that the height follows the aspect ratio of the image. Plus the hover effect and the display position class, you can create a neat gallery without writing custom CSS. (W3.CSS)
Key points
- The .w3-image class makes the <img> width of the parent container highly proportional to the aspect ratio
- The class decreases the image transparency when the cursor touches it (.w3-hover-opacity)
- The .w3-display-* class allows placing text or buttons above an image
- Always write alt attributes for accessibility and SEO
- Wrap it with .w3-container so the image has a safe distance from the edge of the screen
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.