There are many things to do on images in CSS. Following are the properties that are used popularly for styling images in CSS:
Property | Value | Description |
---|---|---|
border | 1px solid #ddd; | border of Images |
border-bottom border-top border-left border-right | 1px solid #ddd; | Specific Border |
padding | 15px; / 15px 15px; / 15px 15px 15px; / 15px 12px 15px 12px | Space between image boundary and image |
width | 120px; | width of Images |
height | 80px; | height of Images |
box-shadow | 0 0 2px 1px rgba(0, 140, 186, 0.5); | Shadow of image |
opacity | 0.5; | Transparency of image |
Display:block;
margin-left:auto;
margin-right:auto;
width:50%;
max-width:100%;
height:auto;
img : hover { . . . }
Example 1: boder, padding & width
Example 2: boder, box-shadow & width
Example 3: Aligning an image centrally
Example 4: Making an image responsive
Example 5: Hover effect with opacity