Guide on how to implement a separation effect animation using CSS when hovering over an image

I am looking to create a unique animation effect for the image shown below. My goal is to split the picture diagonally from the top left to the bottom right, a few pixels apart along the X axis.

Although I have made some progress by duplicating the same image and skewing them on the X axis, the split currently occurs from the top right to the bottom left. I need assistance in achieving the desired diagonal split orientation.

In addition, I am struggling to implement an animation that triggers when hovering over the entire image, causing both sides to split and return to their original state upon mouse movement.

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>

My vision is for the image to split into two halves along the middle diagonal line (from top left to bottom right) upon hover, and seamlessly merge back together upon mouse exit.

javascripthtmlcsshoverskew

Answer №1

To achieve this effect, you can utilize clip-path with two opposite polygons that combine to form 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 wish to preserve certain parts of the image, adjust the clip-path accordingly.

.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

My goal is to provide flexibility in updating values through the use of radio buttons, dropdown menus, lists, and other input methods

var trees = []; trees["Furu"] = {1915: 20, 1950: 31, 1970: 53, 1990: 89, 1995: 102, 2000: 117}; trees["Gran"] = {1915: 23, 1950: 39, 1970: 72, 1990: 89, 1995: 92, 2000: 99}; trees["Lauvtre"] = {1915: 4, 1950: 6, 1970: 8, 1990: 12, ...

javascriptarrays

I am having trouble getting Highcarts to load the JSON data

I am currently in the process of utilizing Highcharts to generate a chart. The JSON output I have is in standard format and was generated using PHP's json_encode() function. Below is the JSON output: [["2015-07-13 16:41:05","3"],["2015-08-15 16:41:05 ...

javascriptjqueryjsonajaxhighcharts

Images with full-width will scroll horizontally

Is there a way to fix the horizontal scroll issue? <!DOCTYPE html> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https:// ...

htmlcsstwitter-bootstrapbootstrap-4

What is the purpose of using "recaptcha_get_html" function to echo?

Hello everyone. I've been struggling to incorporate Google's reCAPTCHA into my project and I keep encountering an error when trying to use the recaptcha_get_html function. It keeps showing up as undefined and despite searching high and low, I can ...

phphtmlcssrecaptcha

When pressed, the button changes color to a vibrant shade of blue, and not just a simple outline

I'm experiencing an issue with a button that turns blue when the user holds onto it for a while on mobile. You can see an example in the image below: https://i.sstatic.net/VmnZ8.png Adding ::selected or outline did not resolve the problem as the ent ...

javascripthtmlcss

Expanding the height of Bootstrap 4 cards

I'm having an issue with Bootstrap 4's card columns where the height of the shorter card ends up stretching to match the one beside it. This only occurs when I add the 'row' class to the parent div. If I remove the 'row' class ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-cards

Picture navigation tool

Looking for a way to create a side navigating menu bar using HTML and CSS? The challenge is wanting the menu items to only appear after clicking on a small image positioned at the top left corner of the page, which happens to be my website logo. Does anyo ...

javascriptjqueryhtmlcss

jQuery SlideUp and SlideDown causing Margin Bug in Internet Explorer 7

When clicking the "more info" or "less info" buttons to slide content up or down, a spacing glitch is created in IE7. Using show/hide instead of slideUp/slideDown seems to solve the issue. Is there a way to make sliding work in IE7 without causing this pro ...

javascriptjquerycssslideupslidedown

The default expansion behavior of Google Material's ExpansionPanel for ReactJS is not working as expected

Currently, I am in the process of developing a ReactJS application that utilizes Google's Material-UI. Within this project, there is a child class that gets displayed within a Grid once a search has been submitted. Depending on the type of search con ...

javascriptreactjsmaterial-ui

Creating a calculator with JQuery and encountering challenges with performing multiple calculations

I've been working on a calculator using jQuery, but I'm encountering issues with the clear button not functioning properly after multiple calculations. On top of that, subsequent calculations are producing inaccurate results. I am seeking to enh ...

javascriptjqueryhtml

A JavaScriptSerializer counterpart to XmlAttribute/XmlElement

Is there a similar Attribute that can be used on object Properties within a .NET Class to achieve the same functionality as XmlElement or XmlAttribute? [XmlRoot("objects")] public class MyObjects: List<MyObject> { } [XmlRoot("object")] public class ...

.netjavascriptserialization

problem with angular.isNumber

Could someone please explain why I am encountering an issue with angular.isNumber(Number("1s")) The output I am receiving is : var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.x1 = "1s"; ...

htmlangularjs

Tips for showcasing the complete image within v-parallax

For my project, I decided to go with vuetify as the frontend framework. It's a great choice! Now, I have a question about v-parallax - how can I make it display the full image without cropping? Below is some code snippet, and you can find the full cod ...

cssvue.jsvuetify.js

What is the best way to choose and deselect a checkbox in Angular?

I'm currently working on an angular Todo list project where I'm tackling the challenge of implementing a select all and unselect all checkbox feature. todo.ts import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core&ap ...

angularhtml

Click on the social media icon to access the link

Recently, I created a social media icon list for my website but I'm struggling to figure out how to add clickable links to them. I attempted using the "a" tag, but it's not functioning as expected: <div class="leftside"> <ul class= ...

htmlcsshyperlinkicons

Clearing AsyncStorage in React Native

It has come to my attention that I am spending a significant amount of time debugging redux actions in react-native that are being persisted to AsyncStorage using redux-persist. There are instances where I wish I could simply clear AsyncStorage in order to ...

javascriptreact-nativereduxasyncstorage

Ensure that all items are centered while positioning one in the corner

Lately, I've been diving into the world of flexbox and trying out new things. However, there are still some concepts that elude me. My current project involves creating a straightforward layout with three flex items (children). The container is confi ...

htmlcssflexbox

The PrivateRoute component from React-Router-Dom prevents page rendering and redirects to previous routes

I'm experiencing some routing issues when authenticated. Whenever I attempt to access my ViewPortfolio page at localhost:3000/portfolio/portfolioId, it redirects me back to the homepage. I'm uncertain about the cause of this behavior. Even when I ...

javascriptnode.jsreactjsreact-routerreact-router-dom

Using placeholders for multi-statement queries in Node.js with MySQL

I've reached the final stages of my project. The only thing left to do is to write the final query to the database. I want to use placeholders for this, but I'm not sure how to do it correctly in a multi-statement query. This is the query I have ...

javascriptmysqlnode.js

Is there a way to update an array element by clicking on it?

I've come across mentions of using Ajax to achieve this, but I'm a bit unsure about how to incorporate it with the arrays while keeping the system functional. My goal is to update the values of $place and $title each time a user clicks the button ...

phphtmlarraysajax