Breaking video cover into quarters

How would I get the image to break apart, horizontally and vertically?

Is this possible to do?

If it is, I don’t know how it would be written into the code.

https://jsfiddle.net/hjLmxg9v/2/

<div class="panel-top"></div>
<div class="panel-bottom"></div>
<div class="panel-left"></div>
<div class="panel-right"></div>

Something like:

.curtain.slide .panel-top{
  transform: translateY(-100%);
}

.curtain.slide .panel-bottom{
  transform: translateY(100%);
}

.curtain.slide .panel-left {
  transform: translateX(-100%);
}

.curtain.slide .panel-right {
  transform: translateX(100%);
}

If I understand correctly you’d probably need to do it as 4 quarters with a quarter of the image showing in each. Then you would transform:translate each quarter in the direction it needs to go (e.g. up and left for the first top left quarter and so on for the other quarters).

The images would need to be sized in the way that it was done for each horizontal half and also the way that it was done in the vertical demo I gave you.

It could be a bit tricky getting all the placements correct.

1 Like

Proof of concept.

This works on hover but in your case you would need to change the hover rules to the class that you were adding to start the transition.

1 Like

I’m starting out with this:
https://jsfiddle.net/nzLremj0/1/

I delete all of this:


.panel-left,
.panel-right {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0%;
  transition: all ease 8s;
  /*background-image: url("https://picsum.photos/600");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;*/
  overflow: hidden;
}

.panel-left {
  left: 0;
  /*background-color: rgb(91, 96, 106);*/
}

.panel-right {
  right: 0;
  /*background-color: rgb(229, 211, 211);*/
}

.panel-left::before,
.panel-right::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 200%;
  top: 0;
  left: 0;
  background-image: url("https://via.placeholder.com/600");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}

.panel-right::before {
  left: -100%;
}

.curtain.slide .panel-left {
  transform: translateX(-100%);
}

.curtain.slide .panel-right {
  transform: translateX(100%);
}

You’d need to absolutely position the quarters in your example because you have other content in there.

Change the quarter rule to this.

.quarter {
  overflow: hidden;
  transition: 3s ease;
  position:absolute;
  width:50%;
  height:50%;
}
.q1{left:0;top:0;}
.q2{ top: 0;right: 0;}
.q3 { bottom: 0;left: 0;}
.q4 {right: 0; bottom: 0;}

This refers to the demo before you edited your post.

1 Like

I almost got it:
https://jsfiddle.net/qybphLf9/6/

The top left image is stuck.

It doesn’t move, just stays where it is.

You have a typo in here.


.curtain:.slide .q1

Can you spot it?

1 Like

Got it:
https://jsfiddle.net/7ybhwfzr/

1 Like