Use CSS to achieve hexagonal effect
Implementation ideas
- Use grid for layout, horizontally and vertically centered display
- Use clip-path: polygon() to draw image hexagons
- Use transform: translate() to position the hexagon
- Use filter: grayscale(80%) to filter the image and convert the image to grayscale image
- Mouse floating zoom effect
1. Grid layout grid
Compatibility check.
To turn an HTML element into a grid container, set the display attribute to grid or inline-grid. A grid container holds grid elements consisting of columns and rows.
Properties:
1. grid-template-columns defines the number of columns in the grid layout, and it can also set the width of each column.
2. grid-template-rows defines the number of rows in the grid layout, and it can also set the height of each row.
3. grid-areas specifies the size and position of grid elements in the grid layout, which is the abbreviation of the following properties: grid-row-start / grid-column-start / grid-row-end /grid-column-end | itemname;
4. The justify-content attribute is used to align the grid within the container and set how to allocate the space between and around elements along the main axis of the flexible container (or grid row axis).
5. The align-content attribute is used to set the vertical alignment of grid elements in the container.
6. The place-content attribute specifies the horizontal and vertical distribution of grid elements.
2. Function
Compatibility check.
Definition: The var() function is used to insert custom attribute values. This method is useful if an attribute value is used in multiple places.
Syntax: var(custom-property-name, value)
Example:
:root {<!-- -->
--main-bg-color: coral;
}
#div1 {<!-- -->
background-color: var(--main-bg-color);
}
3. clip-path
Use clipping to create the displayable area of an element. Parts within the area are displayed and parts outside the area are hidden. Some specific shapes can be specified.
Overall code implementation:
<template>
<div class="gallery-container">
<div class="gallery">
<div class="hexagon" v-for="(item, index) in hexagonList" :key="index">
<h2>{<!-- -->{ item.title }}</h2>
<img :src="item.img" />
</div>
</div>
</div>
</template>
<script>
import {<!-- --> defineComponent } from '@vue/composition-api'
import {<!-- --> ElMessage } from 'element-plus'
export default defineComponent({<!-- -->
name: "demo",
data() {<!-- -->
return {<!-- -->
hexagonList: [{<!-- -->
title: "一",
img: "https://picsum.photos/id/106/300/300",
},{<!-- -->
title: "二",
img: "https://picsum.photos/id/136/300/300",
},{<!-- -->
title: "三",
img: "https://picsum.photos/id/1039/300/300",
},{<!-- -->
title: "四",
img: "https://picsum.photos/id/110/300/300",
},{<!-- -->
title: "五",
img: "https://picsum.photos/id/1047/300/300",
},{<!-- -->
title: "六",
img: "https://picsum.photos/id/1057/300/300",
},{<!-- -->
title: "七",
img: "https://picsum.photos/id/1057/300/300",
},{<!-- -->
title: "eight",
img: "https://picsum.photos/id/1040/300/300",
},{<!-- -->
title: "九",
img: "https://picsum.photos/id/136/300/300",
},{<!-- -->
title: "十",
img: "https://picsum.photos/id/1039/300/300",
},{<!-- -->
title: "Eleven",
img: "https://picsum.photos/id/110/300/300",
},{<!-- -->
title: "Twelve",
img: "https://picsum.photos/id/1047/300/300",
},{<!-- -->
title: "Thirteen",
img: "https://picsum.photos/id/1057/300/300",
},{<!-- -->
title: "Fourteen",
img: "https://picsum.photos/id/1057/300/300",
}]
};
},
methods: {<!-- -->
},
})
</script>
<style lang="scss" scoped>
.gallery-container {<!-- -->
min-height: 100vh;
display: grid;
place-content: center; /* Center horizontally and vertically */
background: #aabbfb;
.gallery {<!-- -->
--s: 120px; /* control the size */
--g: 2px; /* control the gap */
display: grid;
.hexagon {<!-- -->
grid-area: 1/1; /* Specifies to display items starting from the first row and first column */
width: var(--s);
aspect-ratio: 1.15; /* aspect ratio scaling */
object-fit: cover; /* Keep the original proportions of the image, there will be clipping */
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%);
transform: translate(var(--_x, 0), var(--_y, 0)) scale(var(--_t, 1)); /* Move and scale the image */
cursor: pointer;
filter: grayscale(80%); /* Grayscale filter */
transition: 0.2s linear; /* transition effect */
position: relative;
& amp;:hover {<!-- -->
filter: grayscale(0);
z-index: 1;
--_t: 1.1;
}
img{<!-- -->
width: 100%;
height: 100%;
margin-bottom: -4px;
}
h2{<!-- -->
width: 100%;
text-align: center;
position: absolute;
top: 50%;
transform: translate(0, -50%);
color: #fff;
}
& amp;:nth-child(1) {<!-- -->
--_y: calc(-100% - var(--g));
}
&:nth-child(3),
&:nth-child(5),
& amp;:nth-child(10) {<!-- -->
--_x: calc(-75% - 0.87 * var(--g));
}
&:nth-child(4),
&:nth-child(6),
& amp;:nth-child(12) {<!-- -->
--_x: calc(75% + 0.87 * var(--g));
}
&:nth-child(3),
& amp;:nth-child(4) {<!-- -->
--_y: calc(-50% - 0.5 * var(--g));
}
&:nth-child(5),
& amp;:nth-child(6) {<!-- -->
--_y: calc(50% + 0.5 * var(--g));
}
& amp;:nth-child(7) {<!-- -->
--_y: calc(100% + var(--g));
}
&:nth-child(8),
& amp;:nth-child(9) {<!-- -->
--_x: calc(-155% + 2 * var(--g));
}
& amp;:nth-child(9) {<!-- -->
--_y: calc(100% + var(--g));
}
&:nth-child(10),
& amp;:nth-child(12) {<!-- -->
--_y: calc(150% + var(--g));
}
& amp;:nth-child(11) {<!-- -->
--_y: calc(200% + var(--g));
}
&:nth-child(13),
& amp;:nth-child(14) {<!-- -->
--_x: calc(155% - 2 * var(--g));
}
& amp;:nth-child(13){<!-- -->
--_y: calc(100% + var(--g));
}
}
}
}
</style>