Show half of image with hover and CSS-CodePudding

How could to show left side of image at begin, and show right side on mouse hover.

body{
  background:gray;
}

img{
    width: 100px;
}

img:hover {

}

 <img src="https://i.stack.imgur.com/AQdqr.png" >

CodePudding user response：

I'm not sure if this is what you need, but you yourself can remake this code for your task.

body {
  background: gray;
}

img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  object-position: 0;
}

img:hover {
  object-position: 100%;
}

<img src="https://i.stack.imgur.com/AQdqr.png">

CodePudding user response：

I will sugest to add a container with two elements inside : your image and a div that will hide half of your image, and on hover we will remove div to show your img

.container{
  position:relative;
  width:150px;
  height:150px;
  border:2px solid black;
}

.container:hover .bg{
  width:0%;
}

.bg{
  transition:all .2s;
  position:absolute;
  right:0;
  width:50%;
  height:100%;
  background:white;
}

img{
  position:absolute;
  height:100%;
  object-fit: contain;
}

<div >
  
 <img src="https://i.stack.imgur.com/AQdqr.png"/>
  <div ></div>
</div>

CodePudding user response：

Youre not clear what you want. I think you want different color while hovering on the picture.

For this crop this picture to a single object. Then you can use css grayscale filter on hover.

body{
background:gray;
}
img{
width: 100px;
}
img:hover {
filter: grayscale(100%);
transition: 1s;
}

<img src="https://i.stack.imgur.com/AQdqr.png" >