CSS Styling Image
CSS Styling Images
Positioning an Image
Using margin will can move an image but using image property margin set to auto and display set to block can be place at the center:
<!DOCTYPE html>
<html>
<head>
<style>
body{
background:black;
color:white;
}
img{
width:200px;
}
.one img{
margin-left:400px;
}
.two img{
margin:auto;
display:block;
}
</style>
</head>
<body>
<div class="one">
<h1>Using margin</h1>
<img src="../images/sample.jpg">
</div>
<div class="two">
<h1>Using margin auto</h1>
<img src="../images/sample.jpg">
</div>
</body>
</html>
Rounded Images
Use the border-radius property to create rounded images: Example Rounded Image: img { border-radius: 10px; }, Example Circled Image: img { border-radius: 50%; }
Thumbnail Images
Use the border property to create thumbnail images.
<!DOCTYPE html>
<html>
<head>
<style>
body{
background:black;
color:white;
}
img{
width:200px;
}
.one img{
border-radius:10px;
}
.two img{
border-radius:50%;
}
.thumb img{
border:2px solid #bdbdbd;
padding:4px;
border-radius:5px;
}
</style>
</head>
<body>
<div class="one">
<h1>Rounded Image</h1>
<img src="../images/sample.jpg">
</div>
<div class="two">
<img src="../images/sample.jpg">
</div>
<div class="thumb">
<h1>Thumbnail Image</h1>
<a href="../images/sample.jpg"><img src="../images/sample.jpg"></a>
</div>
</body>
</html>
Responsive Images
Responsive images will automatically adjust to fit the size of the screen.
With max-width property you can scale an image down if it has to, but you can never scale up to be larger than its original size see the following example:
<!DOCTYPE html>
<html>
<head>
<style>
body{
background:black;
color:white;
}
img{
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="../images/sample.jpg" style="opacity:1;">
</body>
</html>
Transparent Image
The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent:
<!DOCTYPE html>
<html>
<head>
<style>
body{
background:black;
color:white;
}
img{
width:200px;
}
</style>
</head>
<body>
<img src="../images/sample.jpg" style="opacity:0.2;">
<img src="../images/sample.jpg" style="opacity:0.5;">
<img src="../images/sample.jpg" style="opacity:1;">
</body>
</html>
Image Text
How to position text in an image: Example Cingue TerreBottom LeftTop LeftTop RightBottom RightCentered
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.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:white;
}
img {
width: 33%;
height: auto;
float: left;
max-width: 235px;
}
.blur {filter: blur(4px);}
.brightness {filter: brightness(250%);}
.contrast {filter: contrast(180%);}
.grayscale {filter: grayscale(100%);}
.huerotate {filter: hue-rotate(180deg);}
.invert {filter: invert(100%);}
.opacity {filter: opacity(50%);}
.saturate {filter: saturate(7);}
.sepia {filter: sepia(100%);}
.shadow {filter: drop-shadow(8px 8px 10px green);}
</style>
</head>
<body>
<h2>Image Filters</h2>
<p><strong>Note:</strong> The filter property is not supported in Internet Explorer or Edge 12.</p>
<img src="../images/sample.jpg" alt="Sample 1" width="300" height="300">
<img class="blur" src="../images/sample.jpg" alt="sample 2" width="300" height="300">
<img class="brightness" src="../images/sample.jpg" alt="sample 3" width="300" height="300">
<img class="contrast" src="../images/sample.jpg" alt="sample 4" width="300" height="300">
<img class="grayscale" src="../images/sample.jpg" alt="sample 5" width="300" height="300">
<img class="huerotate" src="../images/sample.jpg" alt="sample 6" width="300" height="300">
<img class="invert" src="../images/sample.jpg" alt="sample 7" width="300" height="300">
<img class="opacity" src="../images/sample.jpg" alt="sample 8" width="300" height="300">
<img class="saturate" src="../images/sample.jpg" alt="sample 9" width="300" height="300">
<img class="sepia" src="../images/sample.jpg" alt="sample 10" width="300" height="300">
<img class="shadow" src="../images/sample.jpg" alt="sample 11" width="300" height="300">
</body>
</html>
Creating An Image Card
Information card with image can easily be created with image using width as 100% or object-fit styling properties.
<!DOCTYPE html>
<html>
<head>
<style>
body {margin:25px;}
.card {
width: 40%;
background-color: black;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.2), 0 6px 5px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
display:inline-block;
margin-left:10px;
}
.container {
text-align: center;
padding: 5px 10px;
color:white;
}
</style>
</head>
<body>
<h2>Responsive Cards</h2>
<div class="card">
<img src="../images/sample.jpg" alt="Sample 1" style="width:100%">
<div class="container">
<p>Sample 1</p>
</div>
</div>
<div class="card">
<img src="../images/sample.jpg" alt="Sample 2" style="width:100%">
<div class="container">
<p>Sample 2</p>
</div>
</div>
</body>
</html>
Image Hover Overlay
Create an overlay effect on hover:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 40%;
}
.container .image {
display: block;
width: 100%;
height: auto;
}
.container .overlay {
position: absolute;
bottom:0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.container:hover .overlay {
width: 100%;
}
.container2 {
position: relative;
width: 40%;
display:inline-block;
}
.container2 .image {
display: block;
width: 100%;
height: auto;
}
.container2 .overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.container2:hover .overlay {
bottom: 0;
height: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Slide in Overlay from the Left</h2>
<div class="container">
<img src="../images/sample.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<h2>Slide in Overlay from the Top</h2>
<div class="container2">
<img src="../images/sample.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</body>
</html>
Image Reflection
CSS can be used to reflect image to any position to the right of the image:
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:30%;
-webkit-box-reflect: right;
}
</style>
</head>
<body>
<h1>CSS Image Reflection</h1>
<img src="../images/sample.jpg">
</body>
</html>
Object Fit Property With Image
The CSS object-fit property is used to specify how an >img> or >video> should be resized to fit its container.The content to fill the container in a various of ways such as "preserve that aspect ratio" or "scale and take up as much space as possible".
<!DOCTYPE html>
<html>
<head>
<style>
div{
display:inline-block;
}
h2{font-size:15px;}
img{
width:200px;height:300px
}
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
</style>
</head>
<body>
<h1>The object-fit Property</h1>
<div>
<h2>No object-fit:</h2>
<img src="../images/sample.jpg" alt="Sample" >
</div>
<div>
<h2>object-fit: fill (this is default):</h2>
<img class="fill" src="../images/sample.jpg" alt="Sample" >
</div>
<div>
<h2>object-fit: contain:</h2>
<img class="contain" src="../images/sample.jpg" alt="Sample" >
</div>
<div>
<h2>object-fit: cover:</h2>
<img class="cover" src="../images/sample.jpg" alt="Sample" >
</div>
<div>
<h2>object-fit: scale-down:</h2>
<img class="scale-down" src="../images/sample.jpg" alt="Sample" >
</div>
<div>
<h2>object-fit: none:</h2>
<img class="none" src="../images/sample.jpg" alt="Sample" >
</div>
</body>
</html>
Using CSS to place Image
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:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
width: 80%;
height: 400px;
background-image: url('../images/sample.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
</style>
</head>
<body>
<p>Resize the browser window to see the effect.</p>
<div></div>
</body>
</html>
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:
<!DOCTYPE html>
<html>
<head>
<style>
.gallery {
border: 1px solid #ccc;
}
.gallery:hover {
border: 1px solid #777;
}
.gallery img {
width: 100%;
height: auto;
}
.details {
padding: 15px;
text-align: center;
}
* {
box-sizing: border-box;
}
.container {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px) {
.container {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px) {
.container {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Responsive Image Gallery</h2>
<h4>Resize the browser window to see the effect.</h4>
<div class="container">
<div class="gallery">
<a target="_blank" href="../images/sample.jpg">
<img src="../images/sample.jpg" alt="Sample 1" width="600" height="400">
</a>
<div class="details">Add a description of the image here</div>
</div>
</div>
<div class="container">
<div class="gallery">
<a target="_blank" href="../images/sample.jpg">
<img src="../images/sample.jpg" alt="Sample 2" width="600" height="400">
</a>
<div class="details">Add a description of the image here</div>
</div>
</div>
<div class="container">
<div class="gallery">
<a target="_blank" href="../images/sample.jpg">
<img src="../images/sample.jpg" alt="Sample 3" width="600" height="400">
</a>
<div class="details">Add a description of the image here</div>
</div>
</div>
<div class="container">
<div class="gallery">
<a target="_blank" href="../images/sample.jpg">
<img src="../images/sample.jpg" alt="Sample 4" width="600" height="400">
</a>
<div class="details">Add a description of the image here</div>
</div>
</div>
</body>
</html>
