CSS Styling Images

Example -

img { border:3px dashed black; }

Run Example

Rounded Images

  

Example -

img { border-radius: 10px; }

Run Example

Here is an more example of a Rounded Images:

Example -

img { border-radius: 50%; }

Run Example

Thumbnail Images

Which property is to be used in CSS to create a thumbnail image? The thumbnail image should have border like the following image

Use the border property to create thumbnail images.

Example -

img { border: 2px solid orange; border-radius: 10px; padding: 7px; }

Run Example

Thumbnail Image Hover

Example -

img { border: 2px solid #ddd; border-radius: 10px; padding: 7px; } img:hover { box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5); }

Run Example

Polaroid Images / Cards

A polaroid picture is an iconic image of how pictures used to be. It is strange to see them on a computer but they are also a great way to display images. The images are placed on a white background with a caption underneath the images. In this tutorial we are going to display images in a polaroid style using just CSS.

Example -

body { background: silver; /* use silver background, so that the white edges of polaroids are visible */ } .polaroids { width: 1060px; /* set width */ margin: 0 auto; /* center horizontally */ overflow: hidden; /* clear floating of the images, because we’ll float them left in a while */ padding: 50px; /* space between the images and the div */ }

Run Example

Responsive Images

Responsive images are an important component of responsive Web design (RWD), a design strategy developed by Ethan Marcotte to cope with the amazing popularity of mobile devices for viewing the Web. Ethan recognized that the previous best practice — developing separate websites for different types of devices — simply couldn’t cope with the astonishing variety of devices Web users might employ to access the websites we build.

The website looks gorgeous on computers with super–high-resolution displays because it includes a high-resolution version of the main image. Delivering that image file doesn’t come cheap, though; its 1940 × 1229 pixels make the image 446 KB in size after compression.

The website could use that same image file for all users without compromising the visual experience. Web browsers on smaller devices such as smartphones would resize it to fit the display. While that approach would preserve the visual appeal of the website, the overall user experience would suffer significantly.

Responsive images will automatically adjust to fit the size of the screen.

Example -

img { width: inherit; /* This makes the next two lines work in IE8. */ max-width: 100%; /* Add !important if needed. */ height: auto; /* Add !important if needed. */ }

Run Example

Transparent Image(Opacity)

The opacity-level describes the transparency-level, it ranges from 0.0 to 1.0. The level 0.0 is completely transparent, 0.5 is 50% see-through and level 1.0 is not transparent. Opacity has a default initial value of 1 (100% opaque).

You can create Transparent Background Images by using the CSS property opacity.

  

The first image is the opacity level 1.0 and second image we set opacity level 0.2.

Example -

img { opacity: 0.3; filter: alpha(opacity=30); /* For IE 8 & 9 (more valid) */ }

Run Example

Flip an Image

CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's content on both the front and back of a given container. This tutorial will show you show to create that effect in as simple a manner as possible.

You can flip images with CSS! Possible scenario: having only one graphic for an "arrow", but flipping it around to point in different directions.

Example -

img:hover{ -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; }

Run Example

Image Modal (Advanced)

A CSS-only, responsive image gallery that;

• Opens an image enlargement in a modal overlay/lightbox
• Has "previous" and "next" controls to cycle through the gallery from within the modal overlay/lightbox
• On a small screen, the "previous" and "next" controls become extra large tappable areas for easy finger jabbing
• Uses CSS transitions to animate a gentle fade effect (on thumbs and modal overlay/lightbox)
• Includes optional image captions (inside the modal overlay/lightbox)

Example -

// Get the modal var modal = document.getElementById('myModal'); // Get the image and insert it inside the modal - use its "alt" text as a caption var img = document.getElementById('myImg'); var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); img.onclick = function(){ modal.style.display = "block"; modalImg.src = this.src; captionText.innerHTML = this.alt; } // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; }

Run Example

Image Filters

Using one or more newer CSS properties (background-blend-mode, mix-blend-mode, or filter) gives us a surprising amount of possibilities to manipulate a single source image.

To use the CSS filter property, you specify a value for one of the following functions listed above. If the value is invalid, the function returns "none." Except where noted, the functions that take a value expressed with a percent sign (as in 34%) also accept the value expressed as decimal (as in 0.34).

    

CSS Filters are a powerful tool that authors can use to achieve varying visual effects (sort of like Photoshop filters for the browser). The CSS filter property provides access to effects like blur or color shifting on an element’s rendering before the element is displayed. Filters are commonly used to adjust the rendering of an image, a background, or a border.

Where is one of:

• blur()
• brightness()
• contrast()
• drop-shadow()
• grayscale()
• hue-rotate()
• invert()
• opacity()
• saturate()
• sepia()
• url() - for applying SVG filters
• custom() - "coming soon"

Example -

.img { -webkit-filter: hue-rotate(90deg); filter: hue-rotate(90deg); }

Run Example