How to make an image expand to the right on hover (instead of the left)?-CodePudding

Here is my code:

#background {
  border-radius: 0px 25px 25px 0px;
  cursor: pointer;
  width: 250px;
  height: 300px;
  border: 3px solid black;
  border-right: 2px solid black;
  position: relative;
}
#desc{
    border-radius: 0px 0px 22px 0px;
  background: rgba(190, 190, 190, 0.7);
  background-repeat: repeat;
  width: 100%;
  left: 0px;
  height: 50px;
  bottom: 0px;
  position: absolute;
  z-index: 2;
}
#man{
  height: 100%;
  width: auto;
  position: absolute;
   transition: all 0.4s ease;
   bottom: 0;
}
#man:hover{
  height: 108%;
  width: auto;
  float: center;
}

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<div id="background" style="background: url(paper.gif); background-size: cover;"><img id="man" style="right: 16px;" src="https://www.watertankfactory.com.au/wp-content/uploads/2015/08/Smiling-young-casual-man-2.png" /><div id="desc"></div></div>

</body>
</html>

What I'm trying to do is to make the picture expand inside the div to the right on hover, instead of the left.

It should look like it stayed at a set distance from the right side of the div, like it does at its current state - but mirrored.

Anyone's got any ideas?

CodePudding user response：

Just add an translateX(n%) to your hover. Where n is youre scale Factor - 100%. In your example thats 8%

#background {
  border-radius: 0px 25px 25px 0px;
  cursor: pointer;
  width: 250px;
  height: 300px;
  border: 3px solid black;
  border-right: 2px solid black;
  position: relative;
}
#desc{
    border-radius: 0px 0px 22px 0px;
  background: rgba(190, 190, 190, 0.7);
  background-repeat: repeat;
  width: 100%;
  left: 0px;
  height: 50px;
  bottom: 0px;
  position: absolute;
  z-index: 2;
}
#man{
  height: 100%;
  width: auto;
  position: absolute;
   transition: all 0.4s ease;
   bottom: 0;
}
#man:hover{
  transform: translateX(8%);
  height: 108%;
  width: auto;
  float: center;
}

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<div id="background" style="background: url(paper.gif); background-size: cover;"><img id="man" style="right: 16px;" src="https://www.watertankfactory.com.au/wp-content/uploads/2015/08/Smiling-young-casual-man-2.png" /><div id="desc"></div></div>

</body>
</html>