CSS Image Styling
CSS Image
Images Sizes, Images Thumbnail, Responsive Image, Transparent Images, Images Filter, Image Card etc.
Hey, guys! In this tutorial you will learn CSS Images, that mean how to set CSS properties in HTML Images and decorate it in your webpages, and show attractive your projects.
Here we learn how to set image in different – different styles, such as Images Sizes, Images Thumbnail, Responsive Image, Transparent Images, Images Filter, Image Card etc. and we also see all programming examples and their output also. If you don’t know how to set design of images with CSS, then read this tutorial carefully and learn somethings, you can also copy the programming of this tutorial and apply own projects.
In CSS we can style images in many different- different ways. We can make it rounded, circle, responsive, transparent and many more. New we read one by one and also see the programming example of those.
CSS Circled Images & Corner Rounded
To make Circle image through the using of CSS we need to use simply an important CSS property and this property is border-radius. Through using this property, we can easily increase and decrease the images circle and rounded radius. Below see the programming examples and output also.
Programming Examples of Circle Image & Rounded images corner;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Circle Images Style</title> <style type="text/css"> .corner-rounded{border-radius: 30px;} .circle-image{border-radius: 200px;} </style> </head> <body> <img class="corner-rounded" src="webimage5.jpg" alt="StudyMuch" width="150" height="150"> <img class="circle-image" src="webimage5.jpg" alt="StudyMuch" height="150" width="150"> </body> </html> |
Output of above programming example;
 |
Above you can see the output of programming examples the two images scene are same but the style of shape different each other, first image’s corner is rounder and second image is fully circle shaped, because here we use border-radius CSS property.
Responsive Images
Now we learn how to use CSS properties and use which properties to set image responsive in mobile and desktop screen, to make responsive image we need to use the max-width of image.
Programming examples to make image responsive;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Images</title> <style type="text/css"> .responsiveimg{max-width: 100%; height: auto;} </style> </head> <body> <img class="responsiveimg" src="webimage5.jpg" alt="StudyMuch"> </body> </html> |
Output of above programming example;
  |
Above you can see the output of responsive image program, there the two picture one is mobile picture and second the picture of desktop but you see both images are responsive on mobile and desktop.
CSS Thumbnail Image
We can also make a thumbnail of image, to do this we need to use the padding and border property of CSS. Below sees the programming example.
Programming Examples of Thumbnail Image;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Thumbnail Images</title> <style type="text/css"> .responsiveimg{max-width: 100%; height: auto; border: 2px solid red; padding: 5px; border-radius: 5px;} </style> </head> <body> <img class="responsiveimg" src="webimage5.jpg" alt="StudyMuch"> </body> </html> |
Output of above programming example;
 |
Above you can see the output of programming example, the image looks like a thumbnail and it is also a thumbnail.
CSS Transparent Image
To make transparent image using the help of CSS properties, we need to use the “opacity” property of CSS it makes the image transparent.
The value to set the opacity, the value from 0.0 to 0.1, the lower value makes more transparent to image.
Programming Example of Transparent Images;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <metaname="viewport" content="width=device-width, initial-scale=1.0"> <title> Transparent Images</title> <style type="text/css"> #img-1{opacity: 0.3;} #img-2{opacity: 0.6;} #img-3{opacity: 0.8;} #img-4{opacity: 1.0;} </style> </head> <body><div> <img id="img-1" src="webimage5.jpg" width="160" height="160"> <img id="img-2" src="webimage5.jpg" width="160" height="160"> <img id="img-3" src="webimage5.jpg" width="160" height="160"> <img id="img-4" src="webimage5.jpg" width="160" height="160"> </body> </html> |
Output of above programming example;
  |
You see the above output of programming, all image’s opacity is different, if we set the opacity is 0.0 then the image is not show and it called the transparent image.
CSS Image Card
Now we make the image card, it means you see some image in your life the description of image is shown below the image in card, same as we make here now, here we an image card with a description box. Look below programming example.
Programming Example of Image Card;
<!DOCTYPE html> <html lang="en"> <head> <title> Images Card</title> <style type="text/css"> .imagecard > img{ max-width: 100%; height: auto; margin: 0px; display: block; } .imagecard{box-shadow: 0 20px 30px rgba(0,0,0,0.40), 0 11px 8px rgba(10,0,5,0.22); width: 200px; box-sizing: border-box; transition-duration: 1s; border: 2px solid rgb(26, 153, 0); border-radius: 10px; padding: 3px 3px; cursor: pointer;} .imagecard > p {font-family: sans-serif; padding: 0px 5px 10px 10px; text-align: center; font-family:fantasy; color: rgb(221, 122, 0);} .imagecard:hover{box-shadow: 0 18px 36px green; width: 210px;} </style> </head> <body> <div class="imagecard"><img src="stydymuch.in" alt="studyMuch"> <p>This is the Logo of our website "studymuch.in" StudyMuch. This is a educational website. </p></div> </body> </html> |
Output of above programming example with image and video both output below see and understand how to make Image card.
 |
Video of above image card programming;
You can look above Image Card, how the effect is working when mouse is over the card it size is reduced and shadow of image card is also changing color and size.
In this tutorial you learned the Style HTML Images with using CSS properties, and design stylish and fantastic image, here we learned CSS Circled Images & Corner Rounded, CSS Image Card, Responsive Images, CSS Thumbnail Image, and CSS Transparent Image, I hope you read this well and learn something from this tutorial, if you have any doubt, you can ask in the comment section.
Read Also-
- Learn HTML Table with programming examples.
- Learn all Tutorial of HTML with programming examples.
- Learn HTML From with all properties and examples.
- Learn what is Internet, Is internet really free?
- Learn all Tutorial of CSS with programming examples.
1 Comment
Guillermina Ramnauth · September 23, 2022 at 8:31 am
I’m truly enjoying the design and layout of your site. It’s a very easy on the eyes which makes it much more enjoyable for me to come here and visit more often. Did you hire out a designer to create your theme? Superb work!