4

I have the picture below to which I would like to animate a diagonal split from the line cut through the logo from the top left to bottom right as shown below. The animation would split the picture on the X axis a few pixels apart.

https://i.ibb.co/fDzZ6Sc/Logo.png

I have made some progress so far, I used the same picture twice and laid them over each other and skewed on the X axis. However this split the picture apart from the top right to bottom left. I like it the other way around and can't figure it out.

I also could not figure out how to hover over the whole picture for the animation to execute for both of the sides.

body { background: gainsboro; }
.pageOption {
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  width: 40em; height: 27em;
}
.option, .option img { width: 100%; height: 100%; }
.option {
  overflow: hidden;
  position: absolute;  
  /* arctan(27 / 40) = 34.01935deg 
   * need to skew by 90deg - 34.01935deg = 55.98065deg
  */
  transform: skewX(-55.98deg);
  
  
}

.option:first-child {
  left: -.25em;
  transform-origin: 100% 0;
}
.option:last-child {
  right: -.25em;
  transform-origin: 0 100%;
}

.option img, .option:after {
  transform: skewX(55.98deg);
  transform-origin: inherit;
}

.option:hover {
  left: -.8em;
  transition: 1s;
}
<div class='pageOption'>
  <a href='#' class='option'>
    <img src='https://i.ibb.co/fDzZ6Sc/Logo.png'>
  </a>
  <a href='#' class='option'>
    <img src='https://i.ibb.co/fDzZ6Sc/Logo.png'>
  </a>
</div>

Essentially what I would like to happen is upon hovering on the whole picture, the two sides would split from the middle (cut from the line going from top left to bottom right), and when you move your mouse off, for the image to go back together.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Sam Raha
  • 53
  • 4
  • _“However this split the picture apart from the top right to bottom left.”_ - reverse the sign on the skew degrees, and see what happens. _“I also could not figure out how to hover over the whole picture for the animation to execute for both of the sides.”_ - you could format the second link differently based on that the first one is currently hovered, but not the other way around. Use the hover state of the parent element instead. – misorude Sep 02 '19 at 13:16

1 Answers1

2

You can consider clip-path and easily do this like below. The trick is to use two opposite polygon where the combination will make the full image.

.image {
  width:340px;
  height:230px;
  background-image:url(https://i.ibb.co/fDzZ6Sc/Logo.png);
  background-size:0;
  position:relative;
}
.image:before,
.image:after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image:inherit;
  background-size:cover;
  transition:1s;
}
.image:before {
  clip-path:polygon(0 0, 15% 0,  97% 100%, 0 100%);
}

.image:after {
  clip-path:polygon(100% 0, 15% 0,  97% 100%);
}

.image:hover::before{
   transform:translate(-20px,-10px);
}

.image:hover::after{
   transform:translate(20px,10px);
}

body {
 background:pink;
}
<div class="image">

</div>

If you don't want to cut the The adjust the clip-path

.image {
  width:340px;
  height:230px;
  background-image:url(https://i.ibb.co/fDzZ6Sc/Logo.png);
  background-size:0;
  position:relative;
}
.image:before,
.image:after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image:inherit;
  background-size:cover;
  transition:1s;
}
.image:before {
  clip-path:polygon(0 0, 32% 0 ,32% 19%,  97% 100%, 0 100%);
}

.image:after {
  clip-path:polygon(100% 0,32% 0,32% 19%,97% 100%);
}

.image:hover::before{
   transform:translate(-20px,-10px);
}

.image:hover::after{
   transform:translate(20px,10px);
}

body {
 background:pink;
}
<div class="image">

</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Thank you very much. I will look into how polygon works to learn this. It's a very cool way of doing things! – Sam Raha Sep 02 '19 at 14:40
  • @SamRaha they are easy, you simply need to imagine the points and how they are linked. Here is a good tool that can help you: https://bennettfeely.com/clippy/ – Temani Afif Sep 02 '19 at 14:51
  • Thanks for the help sir. Would you happen to know how to disable the 'transform: translate' for IE as it's not supported. I tried -ms-transform: none !important; on the hovers but it did not work. – Sam Raha Sep 09 '19 at 14:20
  • @SamRaha translate is supported in IE but clip-path is not – Temani Afif Sep 09 '19 at 14:50