How can I make the image expand to the right (instead of to the left) on hover?
Kefir thousand
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 want to do is have the image expand to the right on hover inside the div, not to the left.
It should appear to be some distance from the right side of the div as it is in its current state - but mirrored.
Anyone have any ideas?
Raqqa
Just add one translateX(n%)to your hover . where n is your scale factor - 100%. In your example it's 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>