Css For Stling Images

CSS
Styling Images
Learn how to style images using CSS.
rounded Images
Use the border-radius property to create rounded images:
img {
border-radius: 8px;
}
img {
border-radius: 50%;
}
Thumbnail Images
Use the border property to create thumbnail images.
img {
Thumbnail Image:
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
<img src="paris.jpg" alt="Paris">
Thumbnail Image as Link:
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 src="paris.jpg" alt="Paris">
</a>
Responsive Images
Responsive images will automatically adjust to fit the size of the screen.
Resize the browser window to see the effect:
If 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:
img {
max-width: 100%;
height: auto;
}
Center an Image
To center an image, set left and right margin to auto and make it into
a block element:
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
Image Text
How to position text in an image:
Top left:
<style>
.container {
<div class="container">
position: relative;
<img src="img_5terre_wide.jpg" alt="Cinque Terre"
} width="1000" height="300">
.topleft { <div class="topleft">Top Left</div>
position: absolute; </div>
top: 8px;
left: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
Top right Bottom left Center
.topright { .center {
.bottomleft {
position: absolute; position: absolute;
position: absolute;
top: 8px; top: 50%;
bottom: 8px;
right: 16px; left: 50%;
left: 16px;
font-size: 18px; transform: translate(-50%, -
font-size: 18px; 50%);
}
} font-size: 18px;
Image Hover Overlay

Create an overlay effect on hover:
Example
Fade in text:
<h2>Fade in <style>
Overlay</h2
> .container {
position: relative;
<div width: 50%;

class="conta
}
iner">
<img
src="img_av .image {
atar.png"
display: block;
alt="Avatar"
class="imag width: 100%;
height: auto;
}
.overlay { .container:h
over .overla
position: absolute; y{
top: 0; opacity: 1;
bottom: 0; }
left: 0;
right: 0; .text {
height: 100%; color:
width: 100%; white;
opacity: 0; font-size:
20px;
transition: .5s ease;
position:
background-color: #008CBA; absolute;
} top: 50%;
left: 50%;
2. Fade in a box
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 50%;
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
backface-visibility: hidden;
.middle {
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
.container:hover .image {
opacity: 0.3;
.container:hover .middle {
opacity: 1;
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
</style>
</head>
<body>
<h2>Fade in a Box</h2>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image" style="width:100%">
<div class="middle">
<div class="text">John Doe</div>
</div>
</div>
</body>
</html>
CSS Image Gallery
CSS can be used to create an image gallery.
The HTML
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
</div>
</div>
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
</div>
</div>
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
</div>
</div>
<div class="clearfix"></div>
The CSS
div.gallery {
border: 1px solid #ccc;
div.gallery:hover {
border: 1px solid #777;
div.gallery img {
width: 100%;
height: auto;
div.desc {
padding: 15px;
text-align: center;
}
*{
box-sizing: border-box;
.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;

Css For Stling Images

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Css For Stling Images

Uploaded by

Copyright:

Available Formats

CSS

Resize the browser window to see the effect:

Image Hover Overlay

<div width: 50%;

transition: .5s ease;

transition: .5s ease;

transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%)

padding: 16px 32px;

<img src="img_avatar.png" alt="Avatar" class="image" style="width:100%">

<div class="text">John Doe</div>

<a target="_blank" href="img_5terre.jpg">

<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

<div class="desc">Add a description of the image here</div>

<a target="_blank" href="img_forest.jpg">

<img src="img_forest.jpg" alt="Forest" width="600" height="400">

<div class="desc">Add a description of the image here</div>

<a target="_blank" href="img_lights.jpg">

<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">

<div class="desc">Add a description of the image here</div>

<a target="_blank" href="img_mountains.jpg">

<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">

<div class="desc">Add a description of the image here</div>

border: 1px solid #ccc;

border: 1px solid #777;

@media only screen and (max-width: 700px) {

@media only screen and (max-width: 500px) {

You might also like