Scribd
Upload
30 views11 pages

Css For Stling Images

The document discusses various techniques for styling images using CSS including making images rounded, creating thumbnails, making images responsive, centering images, adding text overlays on hover, and creating an image gallery. Key techniques include using border-radius to round images, max-width and height:auto to make images responsive, display:block and margin:auto to center images, position:absolute and opacity transitions for overlays, and float and media queries to layout an image gallery responsively.

Uploaded by

bwibo Michael
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
30 views11 pages

Css For Stling Images

The document discusses various techniques for styling images using CSS including making images rounded, creating thumbnails, making images responsive, centering images, adding text overlays on hover, and creating an image gallery. Key techniques include using border-radius to round images, max-width and height:auto to make images responsive, display:block and margin:auto to center images, position:absolute and opacity transitions for overlays, and float and media queries to layout an image gallery responsively.

Uploaded by

bwibo Michael
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

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;

transition: .5s ease;

backface-visibility: hidden;

.middle {

transition: .5s ease;

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>

<div class="responsive">

<div class="gallery">

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

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

</a>

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

</div>

</div>

<div class="responsive">

<div class="gallery">

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

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

</a>

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

</div>

</div>
<div class="responsive">

<div class="gallery">

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

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

</a>

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

</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;

You might also like