split background into 3 divs flippable

Question

I'm trying to apply a background into my html/css website but I also want to split this background into 3 divs who can flip when the cursor is hover.

So I guess the best to do could be to make 3 divs side by side (the total size of my screen) then to apply 3 backgrounds to these 3 divs but each of them are a different part of my background image.

Is anyone here can show me how to do that with a snippet please ?

user_12761586 · Answer

Flipping with backside content

/* css reset */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  min-height: 100vh;
  width: 100%;
}


/* ---- */


/* flexbox to place partitions beside each other */

.image-canvas {
  display: flex;
}


/* making each partition of 1/3rd width */

.image-section {
  flex-basis: calc(100% / 3);
  flex-grow: 1;
  height: 100vh;
  overflow: hidden;
  position: relative;
}


/* image container to keep a part of the image */

.image-section .image {
  transition: transform 1s;
  overflow: hidden;
  width: 100%;
  height: 100%;
}


/* image to span the screen width */

.image-section .image img {
  width: 100vw;
  height: 100%;
  position: absolute;
}


/* content container to span the partition width */

.image-section .content {
  width: 100%;
  height: 100%;
  background: #fff;
  /* optional centering */
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  transition: transform 1s;
  transform: rotateY(180deg);
}


/* flip effect to image */

.image-section:hover .image {
  transform: rotateY(180deg);
}


/* reverse flip effect to content */

.image-section:hover .content {
  transform: rotate(0);
}


/* showing only a portion of the image on each partition by dragging to the desired position */

.image-section.one img {
  left: calc(-1 * ((100vw / 3)) * 0);
}

.image-section.two img {
  left: calc(-1 * ((100vw / 3)) * 1);
}

.image-section.three img {
  left: calc(-1 * ((100vw / 3)) * 2);
  /*   right: 0; */
}

I have used the following series of steps to achieve your result:

Take a flex container.
Take a partition div with flex-basis: calc(100% / 3) inside of the container and place two elements for image and content.
Rotate the content section to 180deg and backface-visibility:hidden to hide it when the image is showing.
Apply flip effect to the image on hover, and reverse flip effect to content on the same hover.

Flipping without backside content

/* css reset */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  min-height: 100vh;
  width: 100%;
}


/* ---- */

.image-canvas {
  display: flex;
  height: 100vh;
}

.image-section {
  flex-basis: calc(100% / 3);
  flex-grow: 1;
  height: 100vh;
  overflow: hidden;
  position: relative;
  transition: transform 1s;
  /*   backface-visibility: hidden; */
}

.image-section img {
  width: 100vw;
  height: 100vh;
  position: absolute;
}

.image-section:hover {
  transform: rotateY(180deg);
}

.image-section.one img {
  left: calc(-1 * ((100vw / 3)) * 0);
}

.image-section.two img {
  left: calc(-1 * ((100vw / 3)) * 1);
}

.image-section.three img {
  left: calc(-1 * ((100vw / 3)) * 2);
  /* right: 0; */
}

I have used the following series of steps to achieve your result:

Take a container and set it to full width of the screen.
Place three divs with one-third width of the total width inside of the container.
Make the container flex to place the partitions beside each other.
Place an img with the same src inside each of the partitions spanning the width of the screen.
Pull the second image by 100vw / 3 from the left.
Pull the third image by (100vw / 3) * 2 from left (or 0 from right).
Apply flip effect using transform: rotateY(180deg) and animation effect using transition: transform 1s to the images.

References:

user_7828115 · Answer

I have solved this question using an SVG file while you are using to use the same image but a separate part of it. Please let me know if you are looking for something like this, also, upvote my answer, I have some difficulties while uploading this code sample, still not what I wanted, but I'll let you what I have created for ya, I used the same image side by side, both of them complete the one image. try to re-create this sample below and let me know.

I forget to tell you, in the viewbox you can easily change that.

.flip-card {
                background-color: transparent;
                width: 400px;
                height: 400px;
                perspective: 1000px;
            }

            .flip-card-inner {
                position: relative;
                width: 100%;
                height: 100%;
                text-align: center;
                transition: transform 0.6s;
                transform-style: preserve-3d;
                box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
            }

            .flip-card:hover .flip-card-inner {
                transform: rotateY(180deg);
            }

            .flip-card-front, .flip-card-back {
                position: absolute;
                width: 100%;
                height: 100%;
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
            }

            .flip-card-front {
                background-color: #bbb;
                color: rgba(0, 0, 0, 0.62);
            }

            .flip-card-back {
                background-color: #2980b9;
                color: white;
                transform: rotateY(180deg);
            }






        Let me know if you still need help Peter        
        
        
            
                
                    

                        

                    
                    
                        Div One
                        Place some text here peter....
                    
                
            

            
                
                    

                        

                    
                    
                        Div Two
                        Place some text here peter....

I have used a dummy image here at dummyimage.com more help about SVG at www.w3.org/TR/SVG/pservers.html#Patterns and a useful website to view paths at mapsvg.com

split background into 3 divs flippable

2 Answers

Flipping with backside content

Flipping without backside content