W3.CSS — Images

Basic Image

<img src="image.jpg" alt="Image" style="width:100%">

Image Styles

<!-- Round image -->
<img src="avatar.jpg" alt="Avatar" class="w3-circle" style="width:100px">

<!-- Round image with border -->
<img src="avatar.jpg" alt="Avatar" class="w3-circle w3-border" style="width:100px">

<!-- Responsive image -->
<img src="image.jpg" alt="Image" class="w3-image">

Image Examples

<!-- Profile image -->
<div class="w3-center">
    <img src="avatar.jpg" alt="Avatar" class="w3-circle w3-border" style="width:150px">
    <h3>John Doe</h3>
    <p>Web Developer</p>
</div>

<!-- Image with overlay -->
<div class="w3-display-container">
    <img src="image.jpg" alt="Image" style="width:100%">
    <div class="w3-display-bottomleft w3-container w3-white">
        <h4>Image Title</h4>
    </div>
</div>

<!-- Image grid -->
<div class="w3-row-padding">
    <div class="w3-half">
        <img src="image1.jpg" alt="Image 1" style="width:100%">
    </div>
    <div class="w3-half">
        <img src="image2.jpg" alt="Image 2" style="width:100%">
    </div>
</div>

Image Hover Effects

<!-- Zoom on hover -->
<img src="image.jpg" alt="Image" style="width:100%" 
     onmouseover="this.style.transform='scale(1.1)'" 
     onmouseout="this.style.transform='scale(1)'">

<!-- Opacity on hover -->
<img src="image.jpg" alt="Image" style="width:100%" 
     onmouseover="this.style.opacity='0.7'" 
     onmouseout="this.style.opacity='1'">

Image Utilities

<!-- Image with shadow -->
<img src="image.jpg" alt="Image" class="w3-image w3-round w3-shadow">

<!-- Image with caption -->
<figure class="w3-center">
    <img src="image.jpg" alt="Image" style="width:100%">
    <figcaption>Image caption goes here.</figcaption>
</figure>

Mini Practice

Create HTML code that:

1. Creates a round profile image
2. Adds an image with overlay text
3. Creates an image grid
4. Uses image hover effects

Up Next

Next: Learn about W3.CSS Icons.