css在图片上添加导航 |css3动画使用

首先，大家需要用HTML代码来插入图片，如下：

<div class="img-container">
<img src="picture.jpg" alt="美丽的图片">
</div>

上面的代码将图片放在一个class为img-container的div里面。接下来，大家用CSS给这个div添加相应的样式：

.img-container {
position: relative;
display: inline-block;
}
.img-container:hover .img-nav {
display: block;
}
.img-nav {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.img-nav ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.img-nav ul li {
display: inline-block;
margin: 0 10px;
}

在上面的代码中，大家首先给img-container设置了position:relative，这是因为后续大家的导航条是需要position:absolute来绝对定位的。

然后，大家给.img-container:hover .img-nav添加了一段CSS代码，这是触发导航出现的关键。当鼠标指针停在img-container上时，.img-nav就会显示出来。

.img-nav是大家用来显示导航的div，它的display属性被设置为none，所以一开始并不显示。大家给.img-nav设置了position:absolute以及top、left和transform属性，将其绝对定位在图片的中心位置，这样导航才会显得更美观。

最后，大家给导航的ul和li元素添加样式，来控制导航的样式和排列方式。

通过上述的CSS代码，大家就能在图片上添加出美观的导航条了。这对于网页设计师来说，是一个非常实用的技能。