W3.CSSImages
Images are important factors in website. Effective use of images makes better user experience to the visitor of website. W3.CSS classes provide an excellent way to present and design stylish and attractive images.
w3-card class is give shadow effects just like card to the image.
w3-margin class adds 16px space around the outside of the image.
Example:
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-panel">
<img src="quote.jpg" alt="Inspirational Quotes" width="300px" class="w3-card-4 w3-margin">
<img src="quote-freedom.jpg" alt="Inspirational Quotes" width="300px" class="w3-card-2 w3-margin">
<img src="quote-happy.jpg" alt="Inspirational Quotes" width="300px" class="w3-card-4 w3-margin">
</div>
</body>
</html>
Classes for special effects to the image:
w3-sepia: This class gives sepia effects (brownish-reddish look) to the image. Two other related classes (that gives the level of sepia effects) are w3-sepia-min, w3-sepia-max.
w3-grayscale: This class gives grayscale effects (black & white look) to the image. Two other related classes (that gives the level of grayscale effects) are w3-grayscale-min, w3-grayscale-max.
w3-opacity: This class gives transparency effects to the image. Two other related classes (that gives the level of transparency effects) are w3-opacity-min, w3-opacity-max.
w3-opacity-off: This class removes the transparency effects.
w3-hover-sepia: This class gives the sepia effects when mouse is moved over the image.
w3-hover-grayscale: This class gives the grayscale effects when mouse is moved over the image.
w3-hover-opacity: This class gives the transparency effects when mouse is moved over the image.
w3-hover-opacity-off: This class removes the transparency effects when mouse is moved over the image.
Example:
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h1> Sepia Effects </h1>
<img src="quote.jpg" alt="Inspirational Quotes" height="200px" width="200px" class="w3-border w3-hover-sepia">
<img src="quote.jpg" alt="Inspirational Quotes" height="200px" width="200px" class="w3-border w3-sepia">
<img src="quote.jpg" alt="Inspirational Quotes" height="200px" width="200px" class="w3-border w3-sepia-min">
<img src="quote.jpg" alt="Inspirational Quotes" height="200px" width="200px" class="w3-border w3-sepia-max">
</div>
<div class="w3-container">
<h1> Gray-scale Effects </h1>
<img src="quote-happy.jpg" alt="Inspirational Quotes" height="200px" width="200px" class="w3-border w3-hover-grayscale">
<img src="quote-happy.jpg" alt="Inspirational Quotes" height="200px" width="200px" class="w3-border w3-grayscale">
<img src="quote-happy.jpg" alt="Inspirational Quotes" height="200px" width="200px" class="w3-border w3-grayscale-min">
<img src="quote-happy.jpg" alt="Inspirational Quotes" height="200px" width="200px" class="w3-border w3-grayscale-max">
</div>
</body>
</html>
Responsive Images:
A responsive image is one which is resized by itself to be fit according to the screen size.
The w3-image class is used to make responsive image. The image scales down to be fit on smaller screen but not scale up more than original size of image on larger screen.
<img src="quote-happy.jpg" alt="Inspirational Quotes" class="w3-image">To scale up and down both according to the screen size [set CSS width property 100%]:
<img src="quote-happy.jpg" alt="Inspirational Quotes" style="width:100%>To scale down to be fit on smaller screen and scale up to specified on larger screen [Set CSS max-width property accordingly]
<img src="quote-happy.jpg" alt="Inspirational Quotes" style="width:100%; max-width:350px>
- displays content inside a circle
- displays content in the center
- Both a and b
- None of these
- w3-round corner
- w3-rounded
- w3-round
- None of these