Following is the code to create a thumbnail image using CSS −Example Live Demo img {    border: 3px solid rgb(208, 255, 0);    border-radius: 4px;    width: 150px;    height: 150px; } img:hover {    box-shadow: 2px 2px 4px 2px rgb(60, 255, 53); } Thumbnail Image Example Clicking on the above thumbnail will open image in new tab OutputThe above code will produce the following output −

To center an image on a web page, we have used the display, margin-left, and margin-right properties. Let us first see the display property. The Display Property To set an element as a block element, set the display property to block. In this case, our element is an image − display: block; The Margin-left Property To set the left margin of an element, use the margin-left property in CSS. We have set the left margin for the image as auto that allows the web browser to calculate the left margin − margin-left: auto; The Margin-right Property ... Read More

To create a responsive image, first set an image using the element. Use the width and max-width properties to set the same image to a responsive image. Set an image To set an image on a web page, use the element. The link of the image is included using the src attribute of the element − Above, we have also used the alt attribute for the alternate text. Set the responsiveness The width is set to 100% to convert an image to responsive. Also, you need to set the max-width property − img ... Read More

The avatar image on a website is a profile image visible under the author’s profile. Also visible under the team’s page where details of all the team members are visible on a company’s website. Let us see how to create an avatar image with HTML and CSS. Set the avatar images The images are placed just like any other image using the element − A class is set for both the images so that we can style it and form like an avatar. Style like an avatar image Use the border-radius property and set it ... Read More

To align images side by side, we can use the float property in CSS. With that, flex also allows us to align images. Let us understand them one by one with examples beginning with aligning images side by side with the float property. Align Images Side by Side With Float We can float elements like images with CSS float property to either the left or right of the containing parent element. Other elements are placed around the floated content. Multiple elements with same value of float property enabled are all placed adjacently. In this example, the image is placed on the left using ... Read More

Following is the code to create a blurry background image with CSS −Example Live Demo body, html {    height: 100vh;    margin: 0;    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } * {    box-sizing: border-box; } .backgroundImage {    background-image: url("https://images.pexels.com/photos/1172207/pexels-photo-1172207.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");    filter: blur(10px);    height: 100%;    background-position: center;    background-repeat: no-repeat;    background-size: cover; } .transparentText {    background-color: rgba(0, 0, 0, 0.4);    color: white;    border: 3px solid #f1f1f1;    position: absolute;    top: 40%;    left: 30%;    width: 50%;    padding: 20px;    text-align: center; } I am Shawn I am a web developer OutputThe above code will produce the following output −

Following is the code to create a hero image with CSS −Example Live Demo body, html {    height: 100%;    margin: 0;    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } *, *::before, *::after {    box-sizing: border-box; } h1 {    font-size: 60px;    font-weight: bolder; } .heroContainer {    background-image: linear-gradient( rgba(185, 255, 243, 0.5), rgba(31, 12, 117, 0.5) ),    url("https://images.pexels.com/photos/670720/pexels-photo-670720.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=1000");    height: 50%;    background-position: center;    background-repeat: no-repeat;    background-size: cover;    position: relative; } .heroCaption {    text-align: center;    position: absolute;    top: 20%;    left: 45%;    color: ... Read More

We can easily add a form on a web page. With that, a form can also be added to an image with CSS. In this tutorial, a form will be added to a full-width image with CSS. Let us see how. Set the Styles for the web Page To begin, set the height, margin and padding of your web page. We have also set the font family using the font-family property − body, html { height: 100%; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } Set the Styles for all the Elements We have ... Read More

Following is the code to create a full-page background image with CSS −Example Live Demo body, html {    height: 100%;    margin: 0; } .background {    background-image: url("https://images.pexels.com/photos/1424246/pexels-photo-1424246.jpeg?         auto=compress&cs=tinysrgb&dpr=1&w=1000");    height: 100%;    background-position: center;    background-repeat: no-repeat;    background-size: cover; } OutputThe above code will produce the following output −

We can easily create an image with a transparent background text. Set a black background with 0.5 opacity using the CSS background property. Position this using the position property and place to the bottom of an image. Place the text there i.e., a transparent background text on an image. Let us see how to create an image with a transparent background text with HTML and CSS. Set an image container An image container is set and within that the image and some content is shown. This content goes to the bottom − ... Read More