This chapter will introduce how to use CSS to layout images.
* * *
## Rounded Corners Images
### Example
Rounded corners image:
img {
border-radius: 8px;
}
[Try it »](#)
### Example
Oval image:
img {
border-radius: 50%;
}
[Try it »](#)
* * *
## Thumbnail
We use the `border` property to create thumbnails.
### Example
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
[Try it »](#)
### Example
a {
display: inline-block;
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
transition: 0.3s;
}
a:hover {
box-shadow: 0 0 2px 1px rgba
(0, 140, 186, 0.5);
}
[Try it »](#)
* * *
## Responsive Images
Responsive images automatically adapt to different screen sizes.
In the example, you can see the effect by resizing the browser window:
If you need to freely scale an image, and the scaled size should not exceed its original maximum size, you can use the following code:
### Example
img {
max-width: 100%;
height: auto;
}
[Try it »](#)
**Tip:** For more information on responsive web design, refer to the (#).
* * *
## Image Text
How to position text over an image:
* * *
## Card Style Image
### Example
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img {width: 100%}
div.container {
text-align: center;
padding: 10px 20px;
}
[Try it »](#)
* * *
## Image Filters
The CSS `filter` property is used to add visual effects (such as blur and saturation) to elements.
**Note:** Internet Explorer or Safari 5.1 (and earlier versions) do not support this property.
### Example
Change all images to black and white (100% grayscale):
img {
-webkit-filter: grayscale(100%);/* Chrome, Safari, Opera */
filter: grayscale(100%);
}
[Try it »](#)
**Tip:** Visit the (#) for more information.
* * *
## Responsive Image Gallery
### Example
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px){
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px){
.responsive {
width: 100%;
}
}
[Try it »](#)
* * *
## Image Modal (Lightbox)
This example demonstrates how to combine CSS and JavaScript to render images.
First, we use CSS to create a modal window (dialog box), which is hidden by default.
Then, we use JavaScript to display the modal window when an image is clicked, showing the image in a popup:
### Example
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}
// Get the
element that closes the modal
var span = document.getElementsByClassName("close");
// When the user clicks on (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
[Try it »](#)
YouTip