Mountains
Lorem ipsum dolor..
In this example, we use CSS to create a modal (dialog box) that is hidden by default.
We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.
Add the w3-card-* class to the w3-modal-content container to display the modal as a card.
Wrap any of the w3-card classes around the image to display it as a card:
Wonderful!!! good car.
More shadows:
Voiture de type Allemagne super!!
This example use media queries to re-arrange the images on different screen sizes: for screens larger than 700px wide, it will show four images side by side, for screens smaller than 700px, it will show two images side by side. For screens smaller than 500px, the images will stack vertically (100%).
Use the horizontal scrollbar to see the other images.
Note that the images are of same size.
Hover over the image to see the effect.
Lorem ipsum dolor..
Lorem ipsum dolor..
Lorem ipsum dolor..
Lorem ipsum dolor..
Lorem ipsum dolor..
Lorem ipsum dolor..
Lorem ipsum dolor..
Lorem ipsum dolor..
Lorem ipsum dolor..
Auto width:
Full width:
Display some text when the checkbox is checked:
Press the "Enter" key inside the input field to trigger the button.
Click the radio button to toggle between password visibility:
Password:Change image every 2 seconds:
