1. CSS parent element hover hover child element zoom
.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 mouse hovering picture rotation
.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 mouse hover the picture to enlarge
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);
}