Introduction
This chapter demonstrates about the W3CSS Images which can be inserted into the web pages user can also create web gallery and following are the comcepts covered in this chapter.
- Circled Image
- Rounded Image
- Responsive Images
- Image with Text
- Hooverable Image
- Photo Album
Description
W3.CSS user can get the image within circle shape by using w3-circle by which user can get any image in a circle The code below demonstrates to get the image in a circle as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Image in a Circle</h2>
<p>The w3-circle shapes image into circle:</p>
<img src="splesson.png" class="w3-circle" alt="splessons" style="width:50%">
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
In W3.CSS User can get the image in round shape by using the w3-round class which adds rounded corners to an image. The code below demonstrates to creating the image with rounded corners as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Rounded Images</h2>
<p>The w3-round classes add rounded corners to an image:</p>
<p>w3-round-small:</p>
<img src="cloud.png" class="w3-round-small" alt="Norway" style="width:30%">
<p>w3-round:</p>
<img src="cloud.png" class="w3-round" alt="Norway" style="width:30%">
<p>w3-round-large:</p>
<img src="cloud.png" class="w3-round-large" alt="Norway" style="width:30%">
<p>w3-round-xlarge:</p>
<img src="cloud.png" class="w3-round-xlarge" alt="Norway" style="width:30%">
<p>w3-round-xxlarge:</p>
<img src="cloud.png" class="w3-round-xxlarge" alt="Norway" style="width:30%">
<p>w3-round-jumbo:</p>
<img src="cloud.png" class="w3-round-jumbo" alt="Norway" style="width:30%">
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
Responsive images are known as the which are automatically resize itself and fit to the size of its container while using in different types of devices.
User can construct the responsive images in W3.CSS by using the w3-container and which allows to user to set the image width up to 100% only the code below demonstrates the creating responsive images as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Responsive Image</h2>
<p>An image can be set to automatically resize itself to fit the size of its container.</p>
<div class="w3-display-container w3-text-white">
<img src="splessons.jpg" alt="splessons" style="width:100%">
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
User can restrict the responsive image to a maximum by using the max-width property. The code below demonstrates to using the max-width property as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Responsive Image</h2>
<p>If user want to restrict a responsive image to a maximum size, then which use the max-width property:</p>
<div class="w3-display-container w3-text-white">
<img src="splessons.jpg" alt="splessons" style="width:100%;max-width:400px">
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
User can insert the image with text and user can arrange the position of the text in an image with the w3-display-classes. Which is used to insert the text on the image in a required position. The code below demonstrates to construct image with text as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Image Text</h2>
<p>Position content inside an image with the w3-display-<em>classes</em> - Note that we have added the w3-container class to get more padding:</p>
<div class="w3-display-container w3-text-white">
<img src="cloud.png" alt="Lights" style="width:100%">
<div class="w3-display-topleft w3-container"><p>Top Left</p></div>
<div class="w3-display-topright w3-container"><p>Top Right</p></div>
<div class="w3-display-bottomleft w3-container"><p>Bottom Left</p></div>
<div class="w3-display-bottomright w3-container"><p>Bottom Right</p></div>
<div class="w3-display-middle w3-large">SPLESSONS</div>
</div>
<p>User can also center text at the top or at the bottom of an image:</p>
<div class="w3-display-container w3-text-white w3-section">
<img src="splesson.png" alt="Lights" style="width:100%">
<div class="w3-display-topmiddle w3-container"><p>Top Middle<br/>SPLESSONS</p></div>
<div class="w3-display-bottommiddle w3-container"><p>Bottom Middle</p></div>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
In W3.CSS user can also creates the Hooverable images these images are created by mainly two classes those are shown below.
The code below demonstrates to creating the hooverable image as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Hoverable Image</h2>
<p>The w3-hover-opacity class adds transparency to the image when you move the mouse over it:</p>
<img src="splesson.png" class="w3-hover-opacity" alt="Norway" style="width:50%">
<p>The w3-hover-opacity-off class removes transparency from an image when you move the mouse over it:</p>
<img src="splesson.png" class="w3-opacity w3-hover-opacity-off" alt="Norway" style="width:50%">
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- w3-hover-opacity Which is used to add transparency to the image when mouse over.
- w3-hover-opacity-off Which is used to remove the transparency when the mouse over.
Description
By using W3.CSS user can construct the photo albums in which photo album can be created by Responsive grid system which set by all devices. The code below demonstrates to creating the photo album as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container w3-blue">
<h1>splessons</h1>
</div>
<div class="w3-row-padding w3-margin-top">
<div class="w3-third">
<div class="w3-card-2">
<img src="splessons.jpg" style="width:100%">
<div class="w3-container">
<h5>splessons</h5>
</div>
</div>
</div>
<div class="w3-third">
<div class="w3-card-2">
<img src="splesson.png" style="width:100%">
<div class="w3-container">
<h5>splessons</h5>
</div>
</div>
</div>
<div class="w3-third">
<div class="w3-card-2">
<img src="cloud.png" style="width:100%">
<div class="w3-container">
<h5>cloud</h5>
</div>
</div>
</div>
</div>
<div class="w3-row-padding w3-margin-top">
<div class="w3-third">
<div class="w3-card-2">
<img src="cloud.png" style="width:100%">
<div class="w3-container">
<h5>cloud</h5>
</div>
</div>
</div>
<div class="w3-third">
<div class="w3-card-2">
<img src="splessons.jpg" style="width:100%">
<div class="w3-container">
<h5>splessons</h5>
</div>
</div>
</div>
<div class="w3-third">
<div class="w3-card-2">
<img src="splesson.png" style="width:100%">
<div class="w3-container">
<h5>splessons</h5>
</div>
</div>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Key Points
- User can create photo albums with multiple photos.
- By using W3.CSS user can create Hooverable images.
- Responsive images are fit to the display.