The buttons on a web page can be styled and made attractive using CSS styles and a outline can be set. The text and background color can be easily changed. Also, the default size can be changed. With that, the shape can be given rounded corners using the border-radius property. Let us see how to style outline buttons with HTML and CSS. Buttons The element is used to set different buttons for information, success, warning and danger. These are the different button styles we will set with CSS − Success Info Warning Danger Default Style the ... Read More

Following is the code to create an image zoom:Example Live Demo    * {box-sizing: border-box;}    .img{       display: inline-block;    }    .img-zoom-container {       position: relative;    }    .img-zoom-zoomLens {       position: absolute;       border: 1px solid #d4d4d4;       width: 50px;       height: 50px;    }    .myresult{       display: inline-block;    }    .img-zoom-result {       border: 1px solid #d4d4d4;    } Image Zoom Example Hover over the image on ... Read More

If you are a shutterbug and loves photography, you would love to display it on a website for sure. For that, grids are created for the gallery that also works on different devices. The responsiveness can also be set easily. Let us see how to create a responsive portfolio gallery grid. Set the main content Under the content, set the parent div. Within that, place the divs for image and then the content. Here, we have only shown a single div for our portfolio gallery − ... Read More

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