CSS Images
The appearance of images in wep pages can be changed to a higher extent using CSS. You can make the image corners round or even make the image appear in a circled shape. You can display images as thumbnails by adding a border around the image and some paddings while hover effects too can be added on the images. You can also add effects like blur or saturation to the images as well as make them responsive to different screen sizes as well.
Rounded Images
You can add CSS property border-radius to make images rounded on the corners.
<img src="web-design.jpg" class="rounded">
<style>
.rounded{
border-radius: 10px;
}
</style>
Circled Images
You can also make the images appear in a circled shape with the same CSS property border-radius with value 50% or higher. The image must be close to a square i.e. width and height of the image must be close to equal to get a circled image. In other cases, the image will appear in an oval shape.
<img src="web-design.jpg" class="circle">
<style>
.circle{
height: 300px;
width: 300px;
border-radius: 50%;
}
</style>
Thumbnail Images
You can use CSS property padding and border and display an image as a thumbnail.
<img src="web-design.jpg" class="thumb-nail">
<style>
.thumb-nail{
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
width: 200px;
}
</style>
Images on Hover
You can also add hover effects on images and define the way you want them to appear on hover.
<img src="web-design.jpg" class="hover">
<style>
.hover{
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
width: 200px;
cursor: pointer;
}
.hover:hover{
box-shadow: 0 0 5px #333;
}
</style>
Center an Image
You can use the CSS property margin and make an image appear in the center of the container.
<img src="web-design.jpg" class="center">
<style>
.center{
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
width: 200px;
margin: auto;
display: block;
}
</style>
Polaroid Images / Cards
You can apply the polaroid or card effect on images usinge box-shadow.
<div class="card">
<img src="web-design.jpg">
<div class="text">
Web Design
</div>
</div>
<style>
.card {
width: 300px;
background-color: white;
box-shadow: 0 4px 10px #999, 0 6px 20px #999;
}
.card img {
width: 100%
}
.text {
text-align: center;
padding: 10px 20px;
}
</style>
Transparent Image
You can change the transparency of an image using CSS property opacity.
<img src="web-design.jpg" class="opacity">
<style>
.opacity{
opacity: 0.6;
}
</style>
Responsive Images
Responsive images are such images that will automatically adjust to fit the size of the screen. These images never exceed the viewport width. It can be achieved by adding CSS property max-width width maximum value 100% to any image.
img {
max-width: 100%;
}
Text Over Image
You can use the CSS property position and make texts appear on over images.
<div class="img-holder">
<img src="web-design.jpg">
<div class="img-text">
Text Over Image
</div>
</div>
<style>
.img-holder{
max-width: 320px;
position: relative;
}
.img-holder img{
width: 100%;
}
.img-text{
position: absolute;
top: 10px;
left: 0;
padding: 5px 10px;
box-sizing: border-box;
background: rgba(0,0,0,0.5);
color: #fff;
}
</style>
Image Filters
CSS property filter can be used to add visual effects like blur and saturation to an image. This property is not supported in Internet Explorer, Edge 12, or Safari 5.1 and earlier.
<img src="web-design.jpg" class="filter">
<style>
.filter{
filter: blur(3px);
}
</style>
CSS Filter Options
| Filter Value | Description |
|---|---|
| none | Specifies no effects (default) |
| blur(px) | Applies a blur effect to the image. Larger value makes image more blur. Default value is 0. |
| brightness(%) | Defines the brightness of the image. Deafult value is 100%. |
| contrast(%) | Defines the contrast of the image. Default value is 100%. |
| drop-shadow (h-shadow, v-shadow, blur, spread, color) |
Applies a drop shadow effect to the image. h-shadow - (Required) Specifies a pixel value for the horizontal shadow. Negative values place the shadow to the left of the image. v-shadow - (Required) Specifies a pixel value for the vertical shadow. Negative values place the shadow above the image. blur(px) - (Optional) Adds a blur effect to the shadow. A larger value will create more blur (the shadow becomes bigger and lighter). Negative values are not allowed. If no value is specified, 0 is used. spread(px) - (Optional) Specifies the size of the shadow. Positive values will cause the shadow to expand while negative values will cause the shadow to shrink. Default value is 0 which makes the shadow same size as the element. (Not supported by most of the browsers) color - (Optional) Adds a color to the shadow. Default color is black. |
| grayscale(%) | Converts the image to grayscale. Default value is 0. |
| hue-rotate(deg) | Applies a hue rotation on the image. The value defines the number of degrees around the color circle the image samples will be adjusted. Default value is 0deg while the max-value is 360deg. |
| invert(%) | Inverts the color samples in the image. Default value is 0. |
| opacity(%) | Sets the opacity level for the image. Default value is 100%. |
| saturate(%) | Saturates the image. Default value is 100%. |
| sepia(%) | Converts the image to sepia. Default value is 0. |
| initial | Sets filter to its default value. |
| inherit | Inherits this property from its parent element. |
CSS The object-fit Property
The CSS object-fit property is used to specify how an image or video should be resized to fit its container. This property instructs the content to fill the container in a variety of ways like preserve aspect ratio or stretch up and take up as much space as possible.
Normal Image (400 X 300)
Image With Height and Width Changed (300 X 400)
You can see the difference between the two images above (normal and changed width and height). The change in width and height forced the image to shrink while the pixel aspect ratio is totally destroyed.
With the use of CSS property object-fit, you can preserve the aspect ratio and fill the needed space with the image too.
Changed Width and Height with Object-fit (300 X 400)
<img src="web-design.jpg" class="fit">
<style>
.fit{
width: 300px;
height: 400px;
object-fit: cover;
}
</style>
Object-fit Options
| Property | Description |
|---|---|
| fill | This is default. The replaced content is sized to fill the element's content box. If necessary, the object will be stretched or squished to fit |
| contain | The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box |
| cover | The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit |
| none | The replaced content is not resized |
| scale-down | The content is sized as if none or contain were specified (would result in a smaller concrete object size) |
Leave a comment