效果预览:
实现思路:当鼠标悬浮于父元素main的时候,所有的div子元素都缩小并且添加模糊度,且当鼠标悬浮于具体的某个div的时候,当前div放大1.3倍,且清除模糊度。
实现代码:
html
<main>
<div><img src="/images/2.PNG" alt=""></div>
<div><img src="/images/4.jpg" alt=""></div>
<div><img src="/images/dog.jpg" alt=""></div>
</main>
css
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
background-color: #535c68;
/*控制页面子元素 使其居中显示*/
display: flex;
justify-content: center;
align-items: center;
}
main {
/*控制div子元素使其居中显示*/
display: flex;
justify-content: center;
align-items: center;
}
main div {
height: 200px;
width: 200px;
/*让图片居中显示*/
display: flex;
justify-content: center;
align-items: center;
/*图片溢出部分隐藏*/
overflow: hidden;
transition: all 1s;
}
main div img {
height: 100%;
}
main:hover div{
/*当鼠标悬浮时缩放 0.6倍*/
transform: scale(.6);
filter: blur(10px);
}
main div:hover {
/*当鼠标悬浮时缩放 1.6倍*/
transform: scale(1.2);
/*清除模糊度*/
filter: none;
}