這是我的代碼：
#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 的右側保持一定的距離，就像它在當前狀態下一樣 - 但被鏡像。
任何人有任何想法？
uj5u.com熱心網友回復：
只需translateX(n%)在您的懸停中添加一個。其中 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/335872.html