Style image border

First example is using CSS to style an image border.


The second example turns borders on or off when the mouse rolls over the image link.
This is done by using the hover pseudo-class. Try to move your mouse over the second image and you see this effect.

This can create a rich visual with only a few lines of css code.

Click on this link for a preview of this tutorial.
 
<style type="text/css">
<!--
#img_style {
    border: 40px;
    padding: 6px;
    background-color: #FFCC00;
    border-style: double;
    border-color: #0000FF;
    width: 205px;
}

a:hover img {
    border: 40px;
    padding: 6px;
    background-color: #9999FF;
    border-style: double;
    border-color: #99CCFF;
}


-->
</style>
<div align="center">
  <div id="img_style"><img src="ipod.jpg" width="205" height="268" border="0"></div>
  <br />
  <br />
  <a href="http://www.apple.com" target="_blank"><img src="ipod.jpg" width="205" height="268" border="0"></a></div>
</div>

Advertisement

No User Comments.

No User Comments, be the first one to write your comments?