On a web page, you must have seen a stick menu positioned on the top. With that, a sticky element can also be placed on a web page. Also, using the position property, we can also make an image sticky that would stick even when the web page is scrolled. Let us see how to create a sticky image with HTML and CSS. Set the image Place an image on a web page using the element − Add some text to make the scroll appear Place some text after the image to let the scroll appear. ... Read More

To add a border to an image, use the border property and set it to the element. This is the shorthand property to set the border style, width, color, etc. The border style can be solid, double, dotted, etc. Add a Border to an Image The following is the code to add a border to an image using CSS. We have set the border in the img element − img { border: 8px solid rgb(0, 238, 255); width: 400px; height: 400px; } Example Let us see an example to add a border to an image − ... Read More

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