CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Styling Images

CSS has several properties for styling images. This chapter will teach you how to style HTML Images using CSS:


Rounded Images

Use border-radius property to create rounded images.

Mumbai CST
border-radius: 8px;
img-circle
border-radius: 50%;
img-thumbnail
border-radius: 25px;
Run code

Thumbnail Images

Use the border and padding properties to create thumbnail images.

img-thumbnail
img-thumbnail
img-thumbnail
Run code

Responsive Images

A responsive images adjust itself to fit the size of the screen.

Use width:100%; and height:auto; to make an image responsive:

Run code

Center an Image

To horizontally center an image, use display:block; and set margin-left:auto; and margin-right:auto;

Run code

Aligning Images

Float an image to the right with the float:right; or to the left with float:left;

Run code

Image Cards

The following example shows how to create image card:

Caption text

Caption text

Run code

Transparent Images

You can make transparent images using opacity property.

The opacity property specifies the level of transparency of an element, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.

Chhatrapati Shivaji Terminus

opacity: 1;

Chhatrapati Shivaji Terminus

opacity: 0.5;

Chhatrapati Shivaji Terminus

opacity: 0.2;

Run code

Positioning Text Blocks Over Image

The following example shows how to position text or text blocks over an image:

Top Left

Lorem ipsum dolor sit amet.

Top Right

Lorem ipsum dolor sit amet.

Centered

Lorem ipsum dolor sit amet.

Bottom Left

Lorem ipsum dolor sit amet.

Bottom Right

Lorem ipsum dolor sit amet.

Run code

Responsive Thumbnail Gallery

The following example shows how to lay out images, text, etc:

Thumbnail 1

Thumbnail label

Some sample text.

Thumbnail 2

Thumbnail label

Some sample text.

Thumbnail 3

Thumbnail label

Some sample text.

Run code