How insert Image in Hexagon

HTML-CSS
1

Hello,

I am using this project but i have i am not able to identify how can i insert image on this hexagon https://codepen.io/alexeel/pen/qBqMVGw

2

Add the background-image property to the following rule:

&__item{
		position: relative;
		grid-column: 1 / span 3;
		grid-row: calc(var(--counter) + var(--counter)) / span 2;
		height: 0;
		padding-top: 80%;
		filter: drop-shadow(0px 0px 2px #002543);
		transition: .7s;
		&::before{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: block;
			background-color: #FF6F00;
			overflow: hidden;
			clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
			transition: .5s;


			background-image: url("https://www.edesk.com/wp-content/uploads/elementor/thumbs/How-much-is-an-eCommerce-website-pu34tcu33lsil6min7v1uzxwsrmbboyyen5a0cx624.jpg");
		}

You should get the following:

image
image984×766 100 KB

If that is what you want.

3

i have to use different images for different hexagon

4

You could likely do it in SCSS but I’m not sure that is the best solution. I would avoid generating a bunch of selectors if you can.

You can add the images as content in the HTML and change the SCSS to use them for the shape.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.