CSS Gallery

CSS Gallery

Images can be placed into the webpage using the HTML code,but in order to get control over how the image appears and is display CSS is important.Depending on the nature of your website, it is not necessary to put lots of images unless its a site whose content can only be explained using pictures. You can set the following image properties using CSS.

The Image Border Property

The border property of an image is used to set the width of an image border. This property can have a value in length or in %. A width of zero pixels means no border. Here is the example − 

    •       
                    <!DOCTYPE html>	 
<html>
<head>
<body>
<img style = "border:0px;" src = "/moonshine.jpg"><br/>
<img style = "border:3px dashed red;" src = "moonshine.jpg">
</body>
</html>

    The Image Height Property

    The height property of an image is used to set the height of an image. property can have a value in length or in %. While giving value in %, it applies it in respect of the box in which an image is available. 

    •       
                    <!DOCTYPE html>	 
<html>
<head>
<body>
<img style = "border:1px solid red; height:100px;" src = "/moonshine.jpg"><br/>
<img style = "border:1px solid red; height:50%" src = "moonshine.jpg">
</body>
</html>

    The Image Width Property

    The width property of an image is used to set the width of an image. This property can have a value in length or in %. While giving value in %.it applies it in respect of the box in which an image is available. 

    •       
                    <!DOCTYPE html>	 
<html>
<head>
<body>
<img style = "border:1px solid red; width:200px;" src = "/moonshine.jpg"><br/>
<img style = "border:1px solid red; width:100%" src = "moonshine.jpg">
</body>
</html>

    The -moz-opacity Property

    The -moz-opacity property of an image is used to set the opacity of an image. This property is used to create a transparent image in Mozilla. IE uses filter:alpha(opacity=x) to create transparent images. In Mozilla (-moz-opacity:x) x can be a value from 0.0 - 1.0. A lower value makes the element more transparent (The same things goes for the CSS3-valid syntax opacity:x). In IE (filter:alpha(opacity=x)) x can be a value from 0 - 100. A lower value makes the element more transparent. 

    •       
                    <!DOCTYPE html>	 
<html>
<head>
<body>
<img style = "border:1px solid red; -moz-opacity:0.4;" src = "/moonshine.jpg">
</body>
</html>

    CSS Image Gallery

    The following image gallery is created with CSS: 

    •       
                    <!DOCTYPE html>	 
<html>
<head>
<style>
div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}
div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}
</style>
<head>
<body>

<div class="gallery">
<a target="_blank" href="moonshine.jpg">
<img src="moonshine.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">shining star</div>
</div>

<div class="gallery">
<a target="_blank" href="moonshine.jpg">
<img src="moonshine.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">moon</div>
</div>

<div class="gallery">
<a target="_blank" href="moonshine.jpg">
<img src="moonshine.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">shining</div>
</div>

<div class="gallery">
<a target="_blank" href="moonshine.jpg">
<img src="moonshine.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">star</div>
</div>

</body>
</html>

    Popular tags

    CSS Button CSS Gradient CSS Responsive CSS Transition CSS Gallery

    Dess App

    DessApp is an Integrated E-learning Education, Interactive and User-friendly features, smarter options and redefining your school costs effectively and efficiently.

    View
    1 1