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

The filter property is used to set visual effects, such as drop shadow, contrast, brightness, saturation, shadow to images in CSS. The following is the syntax − Syntax The following is the syntax − filter: none | drop-shadow() | blur() | brightness() | contrast() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); As you can see above, with the filter property, we can set the following effects: contrast, drop shadow, blur, brightness, grayscale, hue-rotate, invert, opacity, saturate, sepia, url. The following are the example codes to add visual effects to images with CSS − Add a Visual Effect to ... Read More

To create an image overlay icon effect with CSS, you need to set the icons. Here, we will consider the Font Awesome icon. To include such icons, set the CDN for the icon under the . On hover, the overlay effect will display an icon. Set the CDN for the icons To add the icons on our web page, we have used the Font Awesome Icons. Include it on a web page using the element − Set the parent container for the card A div is set for the card that includes the image, text as ... Read More

The image overlay title on hover is visible on an image when the mouse cursor is hovered. For that, the :hover selector is used. The transition needs to be set for the overlay using the transition property. Let us see how to create an image overload title on hover with HTML and CSS. Set a container A container div is set. Within that, set an image for a child div for the overlay − Amit Position the container div The position of the container div is set to ... Read More

The image overlay zoom effect on hover is visible on an image when the mouse cursor is hovered. For that, the :hover selector is used. The transition needs to be set for the overlay zoom using the transition property. Let us see how to create an image overload title on hover with HTML and CSS. Set a container A container div is set. Within that, set an image for a child div for the overlay − Amit Set ... Read More

The image overlay slide effect is hidden when the page loads and is visible when the mouse cursor is hovered on the image. The ease-in-outtransition effect is set using the transition property to make the overlay slide effect possible. Let us see how to create an image overlay hover slide effect with HTML and CSS. Set the card container A parent div is set for the card text, image, and caption − Tree Position the card container The ... Read More