PLAY WITH IMAGES | CSS
"Customize images according to your requirements"
HTML CODE to attach images:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="images.css">
<title>ANYTHING YOU WANT</title>
</head>
<body>
<img src="pics/donut.jpg" >
</body>
</html>
CSS CODE
Rounded Image
img {
border-radius: 25px;
}
Circled Image
img {
border-radius: 50%;}
Thumbnail Image
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;}
Use Image in its Original Size
img {
max-width: 100%;
height: auto;}
Use image in center
img {
display: block;
margin-right: auto;
margin-left: auto;
}
Use image in right
img {
display: block;
margin-right: inherit;
margin-left: auto;
}
Transparent Image
img {
opacity: 0.4;
}
Flip an Image
img:hover {transform: scaleX(-1);}
posted by Vikas Singh @ July 03, 2020
0 Comments
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
<< Home