In this tutorial, we will learn about how to style an image to change its shape, size, and layout by using different CSS properties such as padding, borders, height, width, margins, etc.
CSS Style Image – Rounded Images
The following example demonstrates how to use border-radius: 20px property to create rounded border image −
<html><head><style>
img {
width: 100px;
height: 100px;
border-radius: 20px;
}
</style></head><body><img src="images/pink-flower.jpg" alt="pink-flower"></body></html>CSS Style Image – Circle Images
The following example demonstrates how to use border-radius: 50% property to create circle shaped image −
<html><head><style>
img {
width: 100px;
height: 100px;
border-radius: 50%;
}
</style></head><body><img src="images/pink-flower.jpg" alt="pink-flower"></body></html>CSS Style Image – Thumbnail Images
The following example demonstrates how to create thumbnail image using the border property −
<html><head><style>
img {
border: 2px solid red;
border-radius: 10px;
padding: 5px;
width: 150px;
}
</style></head><body><img src="images/pink-flower.jpg" alt="pink-flower" ></body></html>CSS Style Image – Thumbnail Images As Link
The following example demonstrates how to create a thumbnail image as a link. To create a link, wrap an anchor tag around the image tag −
<html><head><style>
img {
border: 2px solid red;
border-radius: 10px;
padding: 5px;
width: 150px;
}
img:hover {
border: 2px solid blue;
box-shadow: 0 0 5px 2px rgba(82, 241, 108, 0.5);
}
</style></head><body><a target="_blank" href="images/red-flower.jpg"><img src="images/pink-flower.jpg" alt="pink-flower"></a></body></html>CSS Style Image – Responsive Images
The following example demonstrates how the images will automatically resize to match the screen size −
<html><head><style>
img {
max-width: 100%;
width: 500px;
height: 300px;
}
</style></head><body><p>Resize the browser window to see the effect.</p><img src="images/pink-flower.jpg" alt="Pink Flower" ></body></html>CSS Style Image – Center an Image
The following example demonstrates how the image will resize to match the screen size, when the screen size is changed −
<html><head><style>
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
height: 200px;
}
</style></head><body><img src="images/pink-flower.jpg" alt="Pink Flower"></body></html>CSS Style Image – Polaroid Images / Cards
The following example demonstrates a responsive polaroid-styled image with a shadow effect −
<html><head><style>
.polaroid-image {
width: 60%;
height: 200px;
background-color: white;
box-shadow: 0 3px 6px 0 grey, 0 8px 16px 0 black;
margin-bottom: 25px;
margin: 20px;
}
img {
width: 100%;
height: 150px;
}
.box {
text-align: center;
padding: 5px;
}
</style></head><body><div class="polaroid-image"><img src="images/red-flower.jpg" alt="Flower"><div class="box"><p>Tree</p></div></div></body></html>CSS Style Image – Transparent Image
The following example demonstrates how to create a transparent image by using the opacity property. The opacity property can be set to a value between 0 and 1.
The opacity of “img1” is set to 0.4, making it more transparent, while “img2” is set to 0.8, making it less transparent.
<html><head><style>
.img1 {
opacity: 0.4;
width: 170px;
height: 100px;
}
.img2 {
opacity: 0.8;
width: 170px;
height: 100px;
}
</style></head><body><img class="img1" src="images/tree.jpg" alt="Tree"><img class="img2" src="images/tree.jpg" alt="Tree"></body></html>CSS Style Image – Center The Text
he following example demonstrates the different filter effects that can be applied to an image using filter property −
<html><head><style>
.box {
display: flex;
align-items: center;
justify-content: center;
}
.center-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-40%, -40%);
font-size: 30px;
font-weight: bold;
color: blue;
}
img {
width: 100%;
height: auto;
opacity: 0.4;
height: 250px;
}
</style></head><body><div class="box"><img src="images/tree.jpg" alt="Tree"><div class="center-text">Tree Image</div></div></body></html>CSS Style Image – Filters
The following example demonstrates that different filter effects are applied to an image using filter property −
<html><head><style>
img {
width: 300px;
height: 300px;
height: auto;
float: left;
max-width: 235px;
}
.blur-img {
filter: blur(3px);
}
.brightness-img {
filter: brightness(220%);
}
.grayscale-img {
filter: grayscale(110%);
}
.huerotate-img {
filter: hue-rotate(120deg);
}
.invert-img {
filter: invert(110%);
}
.shadow-img {
filter: drop-shadow(6px 6px 8px red);
}
.saturate-img {
filter: saturate(8);
}
.sepia-img {
filter: sepia(110%);
}
</style></head><body><img class="blur-img" src="images/pink-flower.jpg" alt="Flower"><img class="brightness-img" src="images/pink-flower.jpg" alt="Flower"><img class="grayscale-img" src="images/pink-flower.jpg" alt="Flower"><img class="huerotate-img" src="images/pink-flower.jpg" alt="Flower"><img class="invert-img" src="images/pink-flower.jpg" alt="Flower"><img class="shadow-img" src="images/pink-flower.jpg" alt="Flower"><img class="saturate-img" src="images/pink-flower.jpg" alt="Flower"><img class="sepia-img" src="images/pink-flower.jpg" alt="Flower"></body></html>CSS Style Image – Fade In Overlay
The following example demonstrates that an image with fade in overlay effect shows text when you hover over the image −
<html><head><style>
.img-container {
position: relative;
width: 250px;
}
.img-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
opacity: 0;
transition: opacity 0.4s ease;
}
.overlay-text {
color: red;
font-weight: bold;
font-size: 25px;
position: absolute;
top: 40%;
left: 20%;
}
.img-container:hover .img-overlay {
opacity: 1;
}
img {
width: 100%;
height: auto;
display: block;
}
</style></head><body><div class="img-container"><div class="img-overlay"><div class="overlay-text">Tutorialspoint</div></div><img src="images/see.jpg" alt="See Image"></div></body></html>CSS Style Image – Slide In Effect
The following example demonstrates that slide-in overlay effect from the top of an image that shows text when you hover over the image −
<html><head><style>
.img-container {
position: relative;
width: 250px;
overflow: hidden;
}
.img-overlay {
position: absolute;
bottom: 100%;
left: 0;
background-color: violet;
overflow: hidden;
width: 100%;
text-align: center;
height: 100%;
transition: 0.4s ease;
}
.img-container:hover .img-overlay {
bottom: 0;
height: 100%;
}
img {
width: 100%;
height: auto;
display: block;
}
</style></head><body><div class="img-container"><div class="img-overlay"><p>CSS Image Slide In Effect</p></div><img src="images/pink-flower.jpg" alt="Flower Image"></div></body></html>CSS Style Image – Flip an Image
You can flip an image when you hover over it using the transform: scaleX(-1) property −
<html><head><style>
img {
width: 200px;
height: 200px;
}
img:hover {
transform: scaleX(-1);
}
</style></head><body><img src="images/see.jpg" alt="See"></body></html>CSS Style Image – Responsive Image Gallery
The following example demonstrates how to create a responsive image gallery that will adjust the image sizes based on the size of the browser window −
<html><head><style>
.gallery {
margin: 10px;
overflow: hidden;
}
.gallery img {
width: 20%;
height: auto;
float: left;
margin: 5px;
border: 2px solid black;
transition: transform 0.4s ease;
}
@media screen and (max-width: 700px) {
.gallery img {
width: 48%;
}
}
@media screen and (max-width: 1000px) {
.gallery img {
width: 30%;
}
}
</style></head><body><h3>Resize the browser window to see the effect.</h3><div class="gallery"><img src="images/tree.jpg" alt="Tree"><img src="images/orange-flower.jpg" alt="Orange"><img src="images/see.jpg" alt="See"><img src="images/red-flower.jpg" alt="Pink"></div></body></html>CSS Style Image – Image Modal
The following example demonstrates how to create a simple modal using an image, where the modal is hidden using the property display: none. When the image is clicked, the modal window opens up showing the same image −
<html><head><style>
.main-img {
width: 500px;
height: 250px;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: yellow;
}
.modal-img {
display: block;
margin: auto;
width: 80%;
height: 80%;
}
.close {
position: absolute;
top: 10px;
right: 10px;
margin: 5px;
color: red;
font-size: 25px;
cursor: pointer;
}
</style></head><body><img src="images/red-flower.jpg" class="main-img" alt="red flower" onclick="openModal()"><div id="imgModal" class="modal" onclick="closeModal()"><span class="close">×</span><img class="modal-img" src="images/red-flower.jpg" alt="Modal Image"></div><script>
function openModal() {
document.getElementById("imgModal").style.display = "block";
}
function closeModal() {
document.getElementById("imgModal").style.display = "none";
}
</script></body></html>
Leave a Reply