CSS Styling Images
Discover how to use CSS to style photos.
Rounded Images
Create rounded images by using the border-radius property:
Example
Rounded Image:
img {
border-radius: 8px;
}
Example
Circled Image:
img {
border-radius: 50%;
}
Thumbnail Images
Make thumbnail images by utilizing the border property.
Example
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Paris" title="CSS Styling Images 4" data-lazy-src="paris.jpg"><noscript><img decoding="async" src="paris.jpg" alt="Paris" title="CSS Styling Images 4"></noscript>
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 decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Paris" title="CSS Styling Images 4" data-lazy-src="paris.jpg"><noscript><img decoding="async" src="paris.jpg" alt="Paris" title="CSS Styling Images 4"></noscript>
</a>
Responsive Images
Images that are responsive will change to fit the screen size on their own.
To observe the effect, resize the browser window:
Add the following if you want an image to scale down when necessary but never up to be greater than its original size:
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, make it a block element and set the left and right margins to auto:
Example
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
Polaroid Images / Cards
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;
}
Transparent Image
The range of values for the opacity property is 0.0 to 1.0. The more transparent, the lower the value:
Example
img {
opacity: 0.5;
}
Image Text
How to arrange text within a picture:
Image Filters
An element can have visual effects (such saturation and blur) added to it using the CSS filter property.
Note: Neither Edge 12 nor Internet Explorer implement the filter property.
Example
Make all of the images 100% grayscale and black and white:
img {
filter: grayscale(100%);
}
An element can have visual effects (such saturation and blur) added to it using the CSS filter property.
Note: Neither Edge 12 nor Internet Explorer implement the filter property.
------IMAGE MUKAVI-------
Image Hover Overlay
Construct a hovering overlay effect:
-------Example MUKAVA------
Flip an Image
Drag the mouse pointer over the image:
------ ANIMATION PHOTO MUKAVU--------
Example
img:hover {
transform: scaleX(-1);
}
Responsive Image Gallery
Image galleries can be made with CSS. In this example, the photos are rearranged on various screen sizes using media queries. To observe the effect, resize the browser window:
------ ANIMATION PHOTO MUKAVU--------
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%;
}
}
Image Modal (Advanced)
This is an illustration of how JavaScript and CSS may cooperate.
First, make a dialog box (modal window) with CSS and set its default hiding behavior.
Next, when a user clicks on the image, use JavaScript to show the modal window and display the image inside of it:
------ ANIMATION PHOTO MUKAVU--------
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";
}
