Hexagon Shaped Thumnail Images

Hello,
Thank you for the fantastic theme.
Is it possible to display blog post grid view thumbnails in a hexagon shape, rather than a square?
i.e. thumbnails in the following grid will appear as a hexagon, not square.

I am working on a grid in which thumbnail images are on the left and the slide content on the right.
I managed to make my thumbnails as hexagon in Chrome with -webkit-mask-image, however it works only in Chrome :(, not compatible with IE and Firefox.
Thanks in advance

.container_wrap .avia-content-slider .slide-image {
margin-right: 10px;
float: left;
width: 125px !important; 
background: none !important;
border: none;
}

.container_wrap .avia-content-slider .slide-image img {
position: relative;
display: inline-block;
width: 125px;
overflow: hidden;
text-align: center;
-webkit-mask-image: url('/hex.png'); /* this is my hexagon mask 125px x 115px */
-webkit-mask-repeat: no-repeat;
}

.container_wrap .avia-content-slider .slide-content{
float: right;
width: 65%;
}

• This topic was modified 10 years, 1 month ago by Post Manager.