下面是我的代码:
#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>我要做的是让图片在div内展开，在悬停时向右展开，而不是向左展开。
它看起来应该与div的右侧保持一段设置的距离，就像它当前的状态一样——但是是镜像的。
有人有什么想法吗?
只需添加一个translateX(n%)到您的hover。其中n是比例因子- 100%在你的例子中是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>