HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Learn how to style images using CSS
Use the border-radius
property to create rounded images:
.rounded .w3-half img{ width:85%;display:block;margin-left:auto;margin-right:auto;margin-bottom:10px;max-width:400px; } .rounded .w3-half:nth-child(1) .w3-example{ margin-right:8px; } .rounded .w3-half:nth-child(2) .w3-example{ margin-left:8px; } @media screen and (max-width:600px) { .rounded .w3-half:nth-child(1) .w3-example{ margin-right:-32px; } .rounded .w3-half:nth-child(2) .w3-example{ margin-left:-32px; } }
Rounded Image:
img {
border-radius: 8px;
}
Circled Image:
img {
border-radius: 50%;
}
Use the border
property to create thumbnail images.
.w3-row-padding{ margin:-8px -16px; } .w3-row-padding .w3-half:nth-child(1) .w3-example{ margin-right:0; } .w3-row-padding .w3-half:nth-child(2) .w3-example{ margin-left:0; } @media screen and (max-width:600px) { .w3-row-padding .w3-half:nth-child(1) .w3-example{ margin-right:-32px; } .w3-row-padding .w3-half:nth-child(2) .w3-example{ margin-left:-32px; } }
Thumbnail Image:
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
<img src="paris.jpg"
alt="Paris">
Responsive images will automatically adjust to fit the size of the screen.
Resize the browser window to see the effect:
If you want an image to scale down if it has to, but never scale up to be larger than its original size, add the following:
img {
max-width: 100%;
height:
auto;
}
To center an image, set left and right margin to auto
and make it into a block
element:
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
Cinque Terre
Northern Lights
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;
}
The opacity
property can take a value from 0.0 - 1.0. The lower value, the more transparent:
opacity 0.2
opacity 0.5
opacity 1
(default)
img {
opacity: 0.5;
}
How to position text in an image:
Try it Yourself:
The CSS filter
property adds visual effects (like blur and saturation) to an element.
Change the color of all images to black and white (100% gray):
img {
filter: grayscale(100%);
}
Create an overlay effect on hover:
Fade in text:
Fade in a box:
Slide in (top):
Slide in (bottom):
Slide in (left):
Slide in (right):
Move your mouse over the image:
img:hover {
transform: scaleX(-1);
}
CSS can be used to create image galleries. This example use media queries to re-arrange the images on different screen sizes. Resize the browser window to see the effect:
.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%;
}
}
This is an example to demonstrate how CSS and JavaScript can work together.
First, use CSS to create a modal window (dialog box), and hide it by default.
Then, use a JavaScript to show the modal window and to display the image inside the modal, when a user clicks on the image:
// 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;
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";
}
// Get the modal var modal = document.getElementById('myModal2'); var images = document.getElementById('eh'); var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); images.onclick = function(){ modal.style.display = "block"; modalImg.src = images.src; modalImg.alt = images.alt; captionText.innerHTML = images.alt; }