THE WORLD'S LARGEST WEB DEVELOPER SITE

CSS Tutorial

CSS HOME CSS Introduction CSS Syntax CSS Selectors CSS How To CSS Comments CSS Colors CSS Backgrounds CSS Borders CSS Margins CSS Padding CSS Height/Width CSS Box Model CSS Outline CSS Text CSS Fonts CSS Icons CSS Links CSS Lists CSS Tables CSS Display CSS Max-width CSS Position CSS Overflow CSS Float CSS Inline-block CSS Align CSS Combinators CSS Pseudo-class CSS Pseudo-element CSS Opacity CSS Navigation Bar CSS Dropdowns CSS Image Gallery CSS Image Sprites CSS Attr Selectors CSS Forms CSS Counters CSS Website Layout CSS Units CSS Specificity

CSS Advanced

CSS Rounded Corners CSS Border Images CSS Backgrounds CSS Colors CSS Gradients CSS Shadows CSS Text Effects CSS Web Fonts CSS 2D Transforms CSS 3D Transforms CSS Transitions CSS Animations CSS Tooltips CSS Style Images CSS object-fit CSS Buttons CSS Pagination CSS Multiple Columns CSS User Interface CSS Variables CSS Box Sizing CSS Media Queries CSS MQ Examples CSS Flexbox

CSS Responsive

RWD Intro RWD Viewport RWD Grid View RWD Media Queries RWD Images RWD Videos RWD Frameworks RWD Templates

CSS Grid

Grid Intro Grid Container Grid Item

CSS Examples

CSS Templates CSS Examples CSS Quiz CSS Exercises CSS Certificate

CSS References

CSS Reference CSS Selectors CSS Functions CSS Reference Aural CSS Web Safe Fonts CSS Animatable CSS Units CSS PX-EM Converter CSS Colors CSS Color Values CSS Default Values CSS Browser Support

CSS Styling Images


Learn how to style images using CSS.


Rounded Images

Use the border-radius property to create rounded images:


Paris

Example

Rounded Image:

img {
  border-radius: 8px;
}
Try it Yourself »
Paris

Example

Circled Image:

img {
  border-radius: 50%;
}
Try it Yourself »

Thumbnail Images

Use the border property to create thumbnail images.

Thumbnail Image:

Paris

Example

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

<img src="paris.jpg" alt="Paris">
Try it Yourself »

Thumbnail Image as Link:

Example

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

img:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

<a href="paris.jpg">
  <img src="paris.jpg" alt="Paris">
</a>
Try it Yourself »


Responsive Images

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

Resize the browser window to see the effect:

Cinque Terre

If you want an image to scale down if it has to, but never scale up to be larger than its original size, add the following:

Example

img {
  max-width: 100%;
  height: auto;
}
Try it Yourself »

Tip: Read more about Responsive Web Design in our CSS RWD Tutorial.


Center an Image

To center an image, set left and right margin to auto and make it into a block element:

Paris

Example

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
Try it Yourself »

Polaroid Images / Cards

Cinque Terre

Cinque Terre

Norway

Northern Lights

Example

div.polaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

img {width: 100%}

div.container {
  text-align: center;
  padding: 10px 20px;
}
Try it Yourself »

Transparent Image

The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent:

Forest

opacity 0.2

Forest

opacity 0.5

Forest

opacity 1
(default)

Example

img {
  opacity: 0.5;
}
Try it Yourself »

Image Text

How to position text in an image:

Example

Cingue Terre
Bottom Left
Top Left
Top Right
Bottom Right
Centered

Try it Yourself:

Top Left » Top Right » Bottom Left » Bottom Right » Centered »

Image Filters

The CSS filter property adds visual effects (like blur and saturation) to an element.

Note: The filter property is not supported in Internet Explorer or Edge 12.

Example

Change the color of all images to black and white (100% gray):

img {
  filter: grayscale(100%);
}
Try it Yourself »

Tip: Go to our CSS filter Reference to learn more about CSS filters.


Image Hover Overlay

Create an overlay effect on hover:

Example

Fade in text:

Avatar
Hello World
Try it Yourself »

Example

Fade in a box:

Avatar
John
Try it Yourself »

Example

Slide in (top):

Avatar
Hello World
Try it Yourself »

Example

Slide in (bottom):

Avatar
Hello World
Try it Yourself »

Example

Slide in (left):

Avatar
Hello World
Try it Yourself »

Example

Slide in (right):

Avatar
Hello World
Try it Yourself »

Flip an Image

Move your mouse over the image:

Paris

Example

img:hover {
  transform: scaleX(-1);
}
Try it Yourself »

Responsive Image Gallery

CSS can be used to create image galleries. This example use media queries to re-arrange the images on different screen sizes. Resize the browser window to see the effect:

Cinque Terre
Add a description of the image here
Forest
Add a description of the image here
Northern Lights
Add a description of the image here
Mountains
Add a description of the image here

Example

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px){
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px){
  .responsive {
    width: 100%;
  }
}
Try it Yourself »

Tip: Read more about Responsive Web Design in our CSS RWD Tutorial.


Image Modal (Advanced)

This is an example to demonstrate how CSS and JavaScript can work together.

First, use CSS to create a modal window (dialog box), and hide it by default.

Then, use a JavaScript to show the modal window and to display the image inside the modal, when a user clicks on the image:

Northern Lights, Norway

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";
}
Try it Yourself »