div.img {
margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img {
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}
div.img a:hover img {
border:1px solid #0000ff;
}
div.desc {
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
</style>
<body>
<div class="img">
<a target="_blank" href="demo.html">
<img src="../html_beg/images/goodhabit.jpg" alt="Good habit" width="113" height="68">
</a>
<div class="desc">Good habit icon that I use</div>
</div>
<div class="img">
<a target="_blank" href="demo.html">
<img src="../html_beg/images/bgdesert.jpg" alt="Desert background" width="100" height="100">
</a>
<div class="desc">Background pic</div>
</div>
<div class="img">
<a target="_blank" href="demo.html">
<img src="../html_beg/images/klematis_small.jpg" alt="Klematis" width="107" height="90">
</a>
<div class="desc">One of the klematis flowers</div>
</div>
<div class="img">
<a target="_blank" href="demo.html">
<img src="../html_beg/images/klematis2_small.jpg" alt="Klematis" width="107"height="80">
</a>
<div class="desc">Another klematis flower</div>
</div>
</body>
Good habit icon that I use
Background pic
One of the klematis flowers
Another klematis flower
