saftutorials.com
CSS Images Tutorial

CSS Image control all image in a website. HTML tag call image to website and CSS control this image by using img command.


 

1) How to control Image by using CSS?

Just write in your css file this line.

img {
    width:100px;
    height:100px;
    border:1px solid red;
}



2) Image Width and Height control by CSS

img {
    width:122px;
    height:100px;
}



3) Image border control by CSS

img {
    border:3px solid red;
}


4) Image border radius control by CSS

img {
    border:3px solid red;
border-radius:20px;
}



5) Image make circle by CSS


<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.imgcircle {
   border:3px solid red;
   border-radius:50%;
}
</style>
</head>
<body>
<div class="imgcircle">
<img src="http://www.saftutorials.com/uploads/sample.png">
</div>
</body>
</html>

Copy code and try to Editor 




5) Image hover control by CSS

.imghover img:hover {
border-radius:50%;
opacity:0.4;
}



6) Image make thumbnail by CSS


<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.imgthumb img {
   border-radius:10px;
   border:1px solid #333;
   background:#ddd;
   padding:10px;
}
</style>
</head>
<body>
<div class="imgthumb">
<img src="http://www.saftutorials.com/uploads/sample.png">
</div>
</body>
</html>

Copy code and try to Editor 



Bootstrap Image Class for Image Responsive

Bootstrap user three image class such as .img-rounded (for rounded image), .img-circle (for circle image), .img-thumbnail (for thumbnail image)



 




Find us on

Facebook Google Plus Twitter Pinterest YouTube

web statistic