CSS Style Image

Image Size:

Set To 300 Pixels And Retain The Image's Aspect Ratio(RGB Image), The Syntax Shown Below Automatically Resizes The Height Of An Image.

                          
                            img {
                                width: 300px; /* Set the width of the image to 300 pixels */
                                height: auto; /* Maintain the aspect ratio by adjusting the height automatically */
                            }

Image Border:

This example adds a blue border with a 2-pixel width to the image.

                          
                            img {
                                border: 2px solid #3498db; /* Add a 2-pixel solid blue border to the image */
                            }

Image Rounded Corners:

This example rounds the corners of the image with a 10-pixel border-radius.

                          
                            img {
                                border-radius: 10px; /* Apply a 10-pixel border-radius to create rounded corners */
                            }

Image Shadow:

This example adds a box shadow to the image for a subtle 3D effect.

                          
                            img {
                                box-shadow: 2px 2px 5px #888888; /* Add a subtle box shadow to the image */
                            }

Grayscale Image:

This example applies a grayscale filter to the image, making it black and white.

                          
                            img {
                                filter: grayscale(100%); /* Convert the image to grayscale */
                            }

Image Opacity:

This example reduces the opacity of the image to 70%, making it semi-transparent.

                          
                            img {
                                opacity: 0.7; /* Set the opacity of the image to 70% */
                            }

Image Hover Effect:

This example adds a hover effect that scales the image up by 10%.

                          
                            img {
                                transition: transform 0.3s ease; /* Add a smooth transition for the transform property */
                            }
                            
                            img:hover {
                                transform: scale(1.1); /* Scale the image up by 10% on hover */
                            }

Responsive Image:

Such example definitively helps to correspond with responsive image which is limited by setting its maximum width up to 100% of its container.

                          
                            img {
                                max-width: 100%; /* Set the maximum width of the image to 100% of its container */
                                height: auto; /* Maintain the aspect ratio by adjusting the height automatically */
                            }

Centered Image:

This example centers the image within its container.

                          
                            img {
                                display: block;
                                margin: 0 auto; /* Center the image by setting left and right margins to auto */
                            }

Image Position:

This instance the position property is invoked to shift the photo by 20px from its default position.

                          
                            img {
                                position: relative;
                                top: 20px; /* Move the image 20 pixels down from its normal position */
                            }