W3CSS Images

A picture is worth a thousand words. In terms of websites, it is worth a million words. Since, websites need to be compact and impart the correct impression at the first sight. Images become manifolds important. In short, Images are one of the most important building blocks of any website. Today, you would rarely find a website without an image. To add images to a website “img” tag is used. However, W3CSS images come with classes that can easily change the way image looks. You can create images with rounded bordered, circle images, bordered images and images within a card. We shall study all of this in this article.

Rounded W3CSS Images

A rounded image is an image with rounded border. It is very simple to create rounded images with W3CSS. Simply add “w3-round” class inside the “img” tag. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
    <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" 
         class="w3-round"
         alt="gun"
         >
    
</body>
    
</html>

Download the code Try the code

Circle Images

You can create any image to a circle using W3CSS. To do so, add w3-circle class to the img tag of the image. It will convert any normal image to a circled image. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
    <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" 
         class="w3-circle"
         alt="gun"
         >
    
</body>
    
</html>

Download the code Try the code

Bordered Images

You can also add borders around an image using “w3-border” class. This adds a default 1px grey border around an image. If you also add “w3-padding” class to the image it adds a further padding between the image and its border. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
    <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" 
         class="w3-border w3-padding"
         alt="gun"
         >
    
</body>
    
</html>

Download the code Try the code

Images as Cards

You can also create images as card with a drop shadow at the bottom. To do so create a div and add class “w3-card-number” to the div. Inside that div, add the markup for your image. Have a look at the following code:

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
    <div class="w3-card-8" style="width:50%">
    <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" alt="gun">
    </div>
</body>
    
</html>

Download the code Try the code

<<< W3CSS List SizesW3CSS Image Effects >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .