Hide the left half of an image and show the left half on image hover

Question

I simply need two photos with half of each photo (left half visible from left image. right half visible from right image) both images are facing each other. When hover on left image it shows it's right half and disappears right side image. And When hover on right image it shows it's left half and left image disappears.

I tried using overflow:hidden and direction:rtl to hide the left side of right image. Default hides right side. So when I hover on left image it works perfect and shows hidden part from right side. But when I hover on left image I can't get the hidden part from left side.

.imagea {
  max-width: 250px;
  overflow: hidden;
  transition: 2s;
}

.imageb {
  max-width: 250px;
  overflow: hidden;
  direction: rtl;
  transition: 2s;
}

.imagea:hover {
  max-width: 100%;
}

.imagea:hover~.imageb {
  max-width: 0px;
}

.imageb:hover {
  max-width: 100%;
}

.imageb:hover .imagea {
  max-width: 0px;
}

<div class="imagea">
  <img src="https://via.placeholder.com/250" />
</div>
<div class="imageb">
  <img src="https://via.placeholder.com/250" />
</div>

Try the `clip` as explained on https://stackoverflow.com/questions/57725/how-can-i-display-just-a-portion-of-an-image-in-html-css — bron, Aug 20 '19 at 21:56

Dacre Denny · Accepted Answer · 2019-08-20T22:35:19.870

A pure CSS solution could be achieved via CSS specificty and the adjacent sibling combinator (ie +).

You could enclose the two img elements in an .images container using flex box to simplify horizontal placement of each image (ie on the "row axis"). By default, style each image so that the:

occupy 50% of the .images container width
occupy 100% of the containers height
use object-position to align the natural image to the respective side of that image elements boundary

Using the :hover pseudo class, the width of image elements are updated so that:

hovering the .images container causes the .right image to occupy the full width of the container and the .left image to occoupy no space (first case)
or, hovering the .left image (which has greater specifiy than the prior hover case) causes the .left image to occupy the full width of the container and the .right image to ocupy no space (second case)

In code this can be implemented as:

.images {
  width:250px;
  height:250px;
  display:flex;
  flex-direction:row;
}

/* Default state of image element */
.images img {
  width:50%;
  height:100%;
  object-fit:cover;      
  transition:width ease-in-out 0.5s;
}

/* Default placement of image relative to box boundary */
.left {
  object-position:left;
}
.right {
  object-position:right;
}

/* Hover behavior for first case */
.images:hover .left {
  width:0;
}
.images:hover .right {
  width:100%;
}

/* Hover behavior for second case */
.images .left:hover {
  width:100%;
}
.images .left:hover + .right {
  width:0;
}

<div class="images">
  <img class="left" src="https://via.placeholder.com/250/FFFF00" />
  <img class="right" src="https://via.placeholder.com/250/FF00FF" />
</div>

Hope that helps!

What Can I do if I want to diagonally cut the two images and do the same thing instead of a straight vertical line? — Dinuka Jayalath, Aug 21 '19 at 04:37
@DinukaJayalath unfortunatly this method only supports vertical or horizontal cut lines — Dacre Denny, Aug 21 '19 at 04:48
Is there another way that I can use the same functionality with diagonal cut lines? — Dinuka Jayalath, Aug 21 '19 at 06:26
@DinukaJayalath there's a posibility that you might be able to achieve this on a diagonal axis with `clip-paths`: https://css-tricks.com/almanac/properties/c/clip-path/ — Dacre Denny, Aug 21 '19 at 09:52

Hide the left half of an image and show the left half on image hover

1 Answers1