1、css父元素hover悬停 子元素缩放
.col-lg-4 img{
cursor: pointer;
transition: all 1s ease;
}
.col-lg-4:hover img{
transform: scale(1.2);
opacity: 0.5;
}
.col-lg-4:hover div:nth-child(2){
bottom: 8px;
}
.col-lg-4 div:nth-child(2){
cursor: pointer;
transition: all 1s ease;
}
2、css鼠标悬停图片旋转
.dingzhi_bottom img:hover{
transform:rotate(360deg);
-ms-transform:rotate(360deg); /* IE 9 */
-moz-transform:rotate(360deg); /* Firefox */
-webkit-transform:rotate(360deg); /* Safari 和 Chrome */
-o-transform:rotate(360deg);
transition: all 0.6s; /* Opera */
}
3、css鼠标悬停图片放大
div{
width: 300px;
height: 300px;
border: #000 solid 1px;
margin: 50px auto;
overflow: hidden;
}
div img{
cursor: pointer;
transition: all 0.6s;
}
div img:hover{
transform: scale(1.4);
}