- 偶然间在众多网页里发现，某网站的小图片设计很是好看，于是研究了一下它的制作方法，跟大家分享，希望给予指点，更多文章请点击关注我。
一、先分析一下整个结构。
- 图片在鼠标经过时会放大（过渡放大）
- 图片下方有一个半透明的矩形块
- 半透明矩形块上有链接文字
- 内涉及position内容较多，请参看我写的文205关于盒子div在position下的定位实例。【205】
二、我们开始创建它的html结构box包裹着一张图一个box1一个a链接。
三、给box加样式，让整个盒子大小为200*130,至于盒子里的图片，就让其宽度100%适应，高度自动，这样图片的比例就不会变形。
四、还记得得那块黑色半透明的box1吗，现在就给它加个样式，让它显出真身。
五、改变它的位置，让它位于box底部。
六、黑色盒子明明在底部了，为什么下面还有一截图片，原来是图片超出了盒子box的高度，毕竟图片的高度是auto出来的，我们只能去掉超出盒子外面的东西。
七、这一去，只能把超链接也去掉了。先通过绝对定位把它给弄出来。
八、改一下超链接样式，让它变得好看一点。
九、重点来了，把黑色盒子变成半透明。
十、再给超链接样式加上鼠标经过时添加下划线。
十一、鼠标经过图片时，图片放大1.2倍。
十二、添加图片上鼠标手形为小手，而不是箭头。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 200px;
height: 130px;
position: relative;
/* box1的父元素box只有是非默认定位才能生效 */
overflow: hidden;
/* 隐藏掉超出盒子的内容 */
}
.box img{
width: 100%;
height: auto;
/* 让图片自适应盒子的大小 */
transition: 0.5s;
/* 动态过渡0.5秒 */
cursor: pointer;
/* 鼠标经过时是小手形 */
}
.box img:hover{
transform: scale(1.2);
/* 鼠标经过时，图片放大1.2陪 */
}
.box .box1{
width: 100%;
height: 30px;
background: black;
position: absolute;
/* box1是绝对定位 */
bottom: 0px;
/* 底部距离0 */
opacity: 0.5;
/* 透明度为0.5（最大取值是1） */
}
.box a{
position: absolute;
bottom: 5px;
/* 绝对位置，底部距离5 */
color: white;
/* 白色的字 */
text-decoration: none;
/* 无下划线 */
font-size: 12px;
/* 字体大小 */
left: 35px;
/* 左边距离（position下产生的） */
}
.box a:hover{
text-decoration: underline;
/* 鼠标经过时有下划线 */
}
</style>
</head>
<body>
<div class="box">
<!-- box是整个项目容器 -->
<img src="lost.jpg" alt="">
<!-- 这里是图片 -->
<div class="box1"></div>
<!-- 这是底部的半透明盒子 -->
<a href="#">看淡了，也就慢慢释怀了</a>
<!-- 这是超链接文字 -->
</div>
</body>
</html>