#html #css
Вопрос:
Вот мой код:
#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; } lt;!DOCTYPE htmlgt; lt;htmlgt; lt;headgt; lt;/headgt; lt;bodygt; lt;div id="background" style="background: url(paper.gif); background-size: cover;"gt;lt;img id="man" style="right: 16px;" src="https://www.watertankfactory.com.au/wp-content/uploads/2015/08/Smiling-young-casual-man-2.png" /gt;lt;div id="desc"gt;lt;/divgt;lt;/divgt; lt;/bodygt; lt;/htmlgt; Что я пытаюсь сделать, так это заставить изображение расширяться внутри div вправо при наведении курсора, а не влево.
Это должно выглядеть так, как будто оно находилось на заданном расстоянии от правой части div, как в его текущем состоянии, но в зеркальном отображении.
У кого — нибудь есть какие-нибудь идеи?
Ответ №1:
Просто добавьте 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; } lt;!DOCTYPE htmlgt; lt;htmlgt; lt;headgt; lt;/headgt; lt;bodygt; lt;div id="background" style="background: url(paper.gif); background-size: cover;"gt;lt;img id="man" style="right: 16px;" src="https://www.watertankfactory.com.au/wp-content/uploads/2015/08/Smiling-young-casual-man-2.png" /gt;lt;div id="desc"gt;lt;/divgt;lt;/divgt; lt;/bodygt; lt;/htmlgt;