CSS图像框架-一个简单的方式来样式图像使用CSS

Posted 2021-02-26

A tutorial showing you how to give your images some style using only CSS rather than using Photoshop to give images a border/frame.

<style type="text/css">
.img
{
display: inline-block;
position: relative;
text-decoration: none;
}
 
.img img
{
border: 1px solid #cccccc;
padding: 10px;
}
 
img:hover { border-color: #aaaaaa; }
 
.img div
{
background: #666666;
color: #ffffff;
opacity: .70;
padding: 3px 0px;
position: absolute;
left: 0px;
bottom: 25px;
text-align: center;
width: 100%;
}
 
.img:hover div { opacity: .90; }
</style>
 
<a href="#" class="img">
<img src="http://www.nealgrosskopf.com/images/gallery/thumbs/100_2640.jpg">
<div>Green Plants</div>
</a>