Rotate image with text

Hey juanraubeda,
Please try our Icon Grid element to create a flipbox, to replace the icon with a image add your image in a html image tag in the title box, like this:

<img src="https://127.0.0.1/2017demo1/wp-content/uploads/2015/07/portfolio-2.jpg">

you can get the url to your image in the media library.

then to hide the icon, add this css to your Quick CSS:

#top .avia-icon-grid-container .avia-icongrid-icon {
display: none !important;
}

you may want to add the page number or section ID to the css so it won’t effect other pages and elements on your site.
This is the result:

Best regards,
Mike

Hi,
This is true as it is an older thread, currently adding HTML to title fields is discouraged. So to add an image to the front of the flip box please try this css and adjust the :nth-child() for each flip box, in this example the css targets the second flip box.

.avia-icon-grid-container li:nth-child(2) .avia-icongrid-wrapper .avia-icongrid-front {
  background-image: url(https://your-site.com/wp-content/uploads/2020/09/CCTV.jpg)!important;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.avia-icon-grid-container li:nth-child(2) .avia-icongrid-wrapper .avia-icongrid-front .avia-icongrid-icon {
	display: none;
}

If you want them to all to use the same image, just remove the :nth-child(), I also recommend adding your page ID to the css so it won’t interfere with other pages.

Best regards,
Mike

Hi,
When I check your flip items the backside seems larger than the front side because the images on the front side have a white border so it adds to the “look” of the borders.
We can make the background color on the backside the same size but this doesn’t change the front side space because there really is no space, it is the white border in the image.
Please try removing the white border from the images first and then we can check again.

Best regards,
Mike