Professional Documents
Culture Documents
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.
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 { .bottomleft { .center {
Example
Fade in text:
.container {
<div class="container"> position: relative;
<img src="img_avatar.png" alt="Avatar" class="image"> width: 50%;
<div class="overlay"> }
<div class="text">Hello World</div>
</div> .image {
</div> display: block;
width: 100%;
height: auto;
}
.overlay { .container:hover .overlay {
top: 0; }
bottom: 0;
left: 0; .text {
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%;
.container:hover .image {
opacity: 0.3;
.container:hover .middle {
opacity: 1;
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
</style>
</head>
<body>
<h2>Fade in a Box</h2>
<div class="container">
<div class="middle">
</div>
</div>
</body>
</html>
<div class="gallery">
</a>
</div>
</div>
<div class="responsive">
<div class="gallery">
</a>
</div>
</div>
<div class="responsive">
<div class="gallery">
</a>
</div>
</div>
<div class="responsive">
<div class="gallery">
</a>
</div>
</div>
<div class="clearfix"></div>
The CSS
div.gallery {
div.gallery:hover {
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%;
.responsive {
width: 49.99999%;
margin: 6px 0;
.responsive {
width: 100%;
.clearfix:after {
content: "";
display: table;
clear: both;