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%);
}
PaulOB
July 15, 2021, 7:23am
2
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
PaulOB
July 15, 2021, 12:42pm
3
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%);
}
PaulOB
July 15, 2021, 2:45pm
5
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.
system
October 21, 2021, 2:44pm
9
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
