<html>
<head>
<meta charset="utf-8">
<title>鼠标悬停图片效果</title>
<style>
*{
margin:0
padding:0
}
.box{
position:relative/*相对定位*/
width:300px/*宽度*/
height:270px/*高度*/
overflow:hidden/*溢出隐藏*/
margin-left:10px/*左外边距*/
margin-top:10px/*顶部外侧边距*/
}
.box img{
width:100%/*宽度*/
height:100%/*高度*/
transition:all 0.3s/*过渡时间*/
}
#box1:hover img{
transform:scale(1.2,1.2)/*放大1.2倍*/
}
#box2 span{
position:absolute/*绝对定位*/
color:red/*文字红色*/
display:none/*隐藏*/
}
#box2:hover span{
display:block/*显示*/
}
#box3:hover{
width:294px/*宽度*/
height:264px/*高度*/
border:3px solid black/*边框*/
}
#box4:hover{
box-shadow:2px 2px gray,-2px -2px gray/*阴影*/
}
#box5:hover img{
transform:rotate(360deg)/*正时针旋转360度，既转一圈*/
}
#box6 h3{
position:absolute/*绝对定位*/
width:120px/*宽度*/
height:120px/*高度*/
font-size:14px/*字体高度*/
background:white/*背景白色*/
display:flex/*弹性容器*/
display:-webkit-flex
justify-content:center
-webkit-justify-content:center/*横向居中*/
align-items:flex-end
-webkit-align-items:flex-end/*纵向靠底部*/
transform:rotate(45deg)/*正时针旋转45度*/
top:-60px/*距离顶部-60px*/
right:-60px/*距离右侧-60px*/
z-index:-1/*在最底层，被遮住看不到*/
}
#box6:hover h3{
z-index:1/*在最顶层，不被遮住，可视。*/
}
</style>
</body>
<!--鼠标悬停图片放大-->
<div class="box" id="box1">
<img src="img/1.jpg">
</div>
<!--鼠标悬停，图片上显示文字-->
<div class="box" id="box2">
<span>一段文字</span>
<img src="img/1.jpg">
</div>
<!--鼠标悬停，图片显示边框-->
<div class="box" id="box3">
<img src="img/1.jpg">
</div>
<!--鼠标悬停，图片显示阴影-->
<div class="box" id="box4">
<img src="img/1.jpg">
</div>
<!--鼠标悬停，图片旋转一圈-->
<div class="box" id="box5">
<img src="img/1.jpg">
</div>
<!--鼠标悬停，图片缺一个角，缺少部分显示栏目名称或其他-->
<div class="box" id="box6">
<h3>板块栏目名称</h3>
<img src="img/1.jpg">
</div>
</body>
</html>
实现鼠标悬停在图片上底部弹出文字内容的实现方法：HTML代码:
<div id="wrapper">
<img src="http://placehold.it/300x200" class="hover" />
<p class="text">text</p>
</div>
CSS代码：
#wrapper .text {
position:relative
bottom:30px
left:0px
visibility:hidden
}
#wrapper:hover .text {
visibility:visible
}
