CSS图片手风琴伸缩效果
鼠标进入图片时当前图片展开,其它图片收缩,同时只有一个图片展开。效果如下:

代码如下:
<template>
<div class="wrapper">
<div class="list">
<div class="item">
<img src="https://pic1.zhimg.com/v2-3be05963f5f3753a8cb75b6692154d4a_720w.jpg?source=172ae18b.jpg" alt="bg2" class="image">
</div>
<div class="item">
<img src="data:image/jpeg;base64,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" alt="bg1" class="image">
</div>
<div class="item">
<img src="https://img95.699pic.com/photo/50046/5562.jpg_wh300.jpg" alt="bg2" class="image">
</div>
<div class="item">
<img src="https://img95.699pic.com/photo/50136/1351.jpg_wh300.jpg" alt="bg1" class="image">
</div>
<div class="item">
<img src="https://img95.699pic.com/photo/50034/0209.jpg_wh300.jpg" alt="bg2" class="image">
</div>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style scoped lang="scss">
.wrapper {
width: 800px;
height: 300px;
.list {
display: flex;
height: 100%;
overflow: hidden;
// 该hover必须在item的hover前面,先触发
// &:hover {
// .item {
// width: 50px;
// }
// }
// item的hover需在后,后触发
.item {
display: inline-block;
margin: 0 2px;
overflow: hidden;
width: 160px;
height: 100%;
transition: width .3s;
.image {
height: 100%;
}
&:hover {
width: 600px;
}
}
}
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
上次更新: 2025/09/05, 8:09:00