CSS picture
This section will show you how to use CSS to lay out pictures.
Rounded picture
Thumbnails
We use the
border
property to create thumbnails.
Instance
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
< img src="paris.jpg" alt="Paris" >
Try it out . . .
Instance
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);
}
< a href="paris.jpg" >
< img src="paris.jpg" alt="Paris" >
< /a >
Try it out . . .
Responsive picture
Responsive pictures automatically fit on screens of all sizes.
In an instance, you can see the effect by resetting the browser size:
If you need to scale the picture freely and the size of the picture is not larger than its original maximum, you can use the following code:
Tip: More about web responsive design can be referred to the CSS Responsive Design tutorial.
Picture text
How to locate picture text:
Instance
Try it out:
Top left corner . . . Top right corner . . . Bottom left corner . . . Bottom right corner . . . Centered . . .Card-style pictures
Instance
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 out . . .
Picture filter
The CSS
filter
is used to add visual effects (ex: blur and saturation) to an element.
Note: Internet Explorer or Safari 5.1 (and earlier) does not support this property.
Instance
Change the color of all pictures to black and white (100% grayscale):
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
Try it out . . .
Tip: Visit the CSS Filter Reference Manual for more information.
Responsive picture album
Instance
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 out . . .
Photo Modal (Modal)
This example shows how to combine CSS and JavaScript to render pictures together.
First, we use CSS to create a modal window (dialog box), which is hidden by default.
We then use JavaScript to display the modal window, and when we click on the picture, the picture appears in the pop-up window:
Instance
var modal = document.getElementById( 'myModal' );
Get the picture modal box, the alt property pops up as Chinese this description
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 <span> element that closes the modal
var span = document.getElementsByClassName( "close" )[ 0 ];
When the user clicks on <span> (x), close the modal
span.onclick = function () {
modal.style.display = "none" ;
}
Try it out . . .