Introduction
This chapter demonstrates about the CSS Images which are used to style images on web pages, create image galleries, maps. Following are the concepts covered in this chapter.
- Types Of CSS Images
Description
By using the CSS Images user can make the web pages very attractive and user can also create the image galleries and some image effects which are described below.
CSS Framed Photo
User can attach the image on the web page with neat padding and margin which includes the border on the image to resemble the photo frame and user can also add the drop shadows to make it as realistic. The code below demonstrates the making framed photo as shown below.
[html]
<!DOCTYPE html>
<html>
<head>
<style>
img.painting {
width:200px;
margin:20px; padding:30px;
background:#ccc;
border:15px ridge #0000ff;
box-shadow:inset 5px 5px 5px #999,
inset -5px -5px 5px #999,5px 5px 5px #444;}
</style>
</head>
<body>
<img class="painting"
src="splessons.jpg"
alt="Indian Painting Oil on Canvas">
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
CSS Image Caption
User can also create the image caption to the element <figure> and <figcaption>. The caption should be appear when the hovered over an image. The code below demonstrates the Image caption as shown below.
[html]
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<style>
figure, figure img.capdemo { width: 750px; height: 150px;
overflow: hidden; border-radius:10px;
box-shadow:5px 5px 5px #444;}
figure:hover figcaption { bottom:155px; }
figcaption {font-family: Lucida Console,Helvetica,Arial, serif;
font-style:italic;background: rgba(123,23,34,0.3);
font-size:30px; padding:5px; color: #fff;
position: relative;
bottom: 300px;
transition: 1s all;-webkit-transition: 1s all;}
</style>
</head>
<body>
<figure>
<img src=splessons.jpg alt="splessons" class="capdemo">
<figcaption>SPLESSONS Tutorials</figcaption>
</figure>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Thumbnail Image Gallery
User can also create the thumbnail gallery by using the different images. The code below demonstrates Creating a thumbnail gallery as shown.
[html]
<!DOCTYPE html>
<html>
<head>
<style>
dl#ThumbnailGallery {
font-family:Arial,Verdana;
position: relative;
background:#444;
padding:50px 30px 70px 30px;
}
dl#ThumbnailGallery dt{
width:70px;
cursor: pointer;
}
dl#ThumbnailGallery dt img {
width:70px;
height:70px;
}
dl#ThumbnailGallery dt:hover+dd {
opacity:1;
}
dl#ThumbnailGallery dd {
position: absolute;
top:10px;
left:100px;
opacity:0;
transition:900ms opacity;
text-align:center;
font-size:20px;
color:#2ee555;
width:auto;
}
dl#ThumbnailGallery dd img{
width:400px;
height:250px;
box-shadow:5px 5px 5px #111,-5px -5px 5px #111;
display:block;
margin-bottom:10px;
border:20px solid #fff;
}
</style>
</head>
<body>
<dl id="ThumbnailGallery">
<dt><img src="splessons.jpg" alt>
<dt><img src="splessons-logo.png" alt>
<dd><img src="splessons.jpg" alt>
<dt><img src="splessons.jpg" alt>
<dt><img src="splessons-logo.png" alt>
<dd><img src="BaldEagle.jpg" alt>
<dt><img src="splessons.jpg" alt>
<dt><img src="splessons-logo.png" alt>
</dl>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Image fade-out Gallery
User can fade out the top image of the images gallery by using the opacity property. When it triggered using the hover class . The code below demonstrates the fade-out image gallery as shown.
[html]
<!DOCTYPE html>
<html>
<head>
<style>
.fade{
margin:30px;
padding:15px;
background-color: #eee;
border-radius:20px;
box-shadow:2px 2px 2px #444,
-2px -2px 2px #555;
}
#first {
-webkit-transition: 700ms ease-in-out all;
position: absolute;
transition:700ms ease-in-out all;
opacity: 1;
}
#first:hover {
opacity: 0;
}
</style>
</head>
<body>
<div>
<img class="fade" src="splesson.png" alt="splessons" width="380" height="250" id="first">
<img class="fade" src="splessons.jpg" alt="splessons" width="380" height="250">
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
If user moved cursor hover the image then which shows the fade out effect as shown below image.
CSS Image Gallery Slider Using Transition
User can also translate() function on image gallery to get the slide out effect. in which the image slide out along the x-axis. The code below demonstrates the image gallery slider using transition as shown.
[html]
<!DOCTYPE html>
<html>
<head>
<style>
.translate{
margin:30px;
padding:15px;
background-color: #eee;
border-radius:20px;
box-shadow:2px 2px 2px #444,
-2px -2px 2px #555;
}
#first {
-webkit-transition: 900ms ease-out all;
position: absolute;
transition:900ms ease-out all;
}
#first:hover {
-webkit-transform: translateY(-492px);
transform: translateY(-492px);
}
</style>
</head>
<body>
<div>
<img class="fade" src="splesson.png" alt="splessons" width="380" height="250" id="first">
<img class="fade" src="splessons.jpg" alt="splessons" width="380" height="250">
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
If the user move the cursor over an image then top image slide out along the x-axis as shown in below image.
Key Points
- For framed photo user can also use border-radius, transforms etc.
- Thumb image galleries are created using lists and opacity properties.
- Filter property is supported only on webkit browser.