X

X

X

CSS Images


Learn how to style images using CSS.


Rounded Images

Use the border-radius property to create rounded images:

Paris

Code Example

img {
    border-radius: 8px;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

Paris

Code Example

img {
    border-radius: 50%;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Thumbnail Images

Use the border property to create thumbnail images.

Thumbnail Image:

Paris

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

Thumbnail Image as Link:


Code 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);
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Responsive Images

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

Resize the browser window to see the effect:

NorwayIf 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:

Code Example

img {
    max-width: 100%;
    height: auto;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


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


Center an Image

To center an image within the page, use margin: auto; and make it into a block element:

Paris

Code Example

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Polaroid Images / Cards

Norway

The Troll’s tongue in Hardanger, Norway

Norway

Northern Lights in Norway

Code Example

body {margin:25px;}

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);
  margin-bottom: 25px;
}

div.container {
  text-align: center;
  padding: 10px 20px;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Transparent Image

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

Forestopacity 0.2

Forestopacity 0.5

Forestopacity 1
(default)

Note: IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 – 100. A lower value makes the element more transparent.

Code Example

img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Image Text

How to position text in an image:

Example

Norway

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, Edge 12, or Safari 5.1 and earlier.

Example

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

img {
-webkit-filter: grayscale(100%); /* Safari 6.0 – 9.0 */
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


Code Example

img:hover {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


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:

Trolltunga Norway

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

Code 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%;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


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

Code 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";
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।