Here’s some HTML and CSS that you can use to create a flip box with images:
HTML
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<img decoding="async" src="front-image.jpg" alt="Front image">
</div>
<div class="flip-box-back">
<img decoding="async" src="back-image.jpg" alt="Back image">
</div>
</div>
</div>
This code creates a flip box using a div element with the class “flip-box”. Inside the flip box, there is another div element with the class “flip-box-inner”. This element is responsible for the flipping effect, which is achieved using CSS transformations.
Inside the “flip-box-inner” element, there are two more div elements: “flip-box-front” and “flip-box-back”. These elements represent the front and back sides of the flip box, respectively.
The “flip-box-front” element contains an img element that displays the “front-image.jpg” image. The “flip-box-back” element contains an img element that displays the “back-image.jpg” image.
When the flip box is hovered over, the “flip-box-inner” element is rotated 180 degrees, revealing the back side of the flip box. When the hover effect is removed, the flip box returns to its original position, showing the front side again.
CSS
.flip-box {
display: inline-block;
perspective: 1000px;
}
.flip-box-inner {
position: relative;
width: 200px;
height: 200px;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-box:hover .flip-box-inner {
transform: rotateY(180deg);
}
.flip-box-front,
.flip-box-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-box-front {
display: flex;
justify-content: center;
align-items: center;
background-color: #bbb;
color: white;
font-size: 36px;
font-weight: bold;
}
.flip-box-back {
background-color: #ddd;
color: black;
transform: rotateY(180deg);
}
This code creates a flip box with two sides: the front and the back. The front side contains the front-image.jpg image, and the back side contains the back-image.jpg image. The flip box has a hover effect that rotates the inner element 180 degrees, revealing the back side of the flip box.
You can customize this code by changing the images and the colors to match your desired design. You can also adjust the size of the flip box by changing the width and height values in the CSS.
