Позиционирование изображения частично за пределами нижней части страницы

У меня есть изображение, которое я помещаю в нижний колонтитул моей страницы. Это небольшой логотип (теперь используется заполнитель iamge). Я бы хотел, чтобы он находился на полпути от нижней части страницы, чтобы при наведении указателя мыши он выглядывал головой вверх как мило. Но я не могу стилизовать его так, чтобы оно было наполовину за пределами нижней части страницы, вместо этого всегда отображается полное изображение, а все остальное содержимое на веб-странице, кажется, перемещается вверх и вниз при наведении курсора. Трудно разобрать, но вот как выглядит переход от зависания мыши к отсутствию зависания:

1

2

Сейчас на нем только стиль:

position: relative; top:75px; left:2%

Пожалуйста, отправьте минимальный воспроизводимый пример.

ecg8 29.06.2018 02:27
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
1
25
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это то, что тебе надо?

body{
  padding: 0;
  margin: 0;
}
.content{
  width: 100vw;
  max-width: 100%;
  background: #4527a0;
  height: auto;
  position: relative;
  text-align: center;
}

.inner_content{
  max-width: 960px;
  text-align: left;
  display: inline-block;
  height: auto;
  color: white;
  line-height: 16px;
}

.imagecontent{
  position: absolute;
  display: block;
  z-index: 100;
  margin: 0;
  padding: 0;
  left: 1%;
  bottom:0%;
  width:120px;
  height: 170px;
  background: #cddc39;
  transform:translateY(85px);
  transition:all 380ms;
  margin-top: -170px;
}

.imagecontent:hover{
    transform:translateY(0px);
}

footer{
  width: 100%;
  display: inline-block;
  vertical-align: top;
  background-color: #afb42b;
  height: 200px;
  position:relative;
  overflow: hidden;
}
<div class = "content">
  <div class = "inner_content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nulla magna, ullamcorper eu metus quis, consequat facilisis nisi. Nullam rhoncus purus sed orci fermentum, et dictum dui consectetur. Duis imperdiet ultricies scelerisque. Aliquam erat volutpat. Praesent congue ex vel pulvinar porta. Fusce rutrum ut odio vitae placerat. Fusce lobortis nec tortor et egestas. Phasellus lorem ligula, finibus ut est eget, interdum interdum ipsum. Vestibulum sed facilisis ipsum, sed lacinia neque.

Suspendisse aliquam magna mauris, in tempus leo consequat in. Morbi blandit turpis nec enim vulputate elementum. Cras magna libero, sodales vitae odio quis, pretium tempus quam. Quisque at purus sed felis viverra scelerisque et sollicitudin turpis. Sed vitae arcu eu massa efficitur blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc sed erat faucibus, lacinia tortor quis, rhoncus odio. Proin laoreet justo ac magna blandit, id sollicitudin orci pellentesque. Curabitur ac augue eu nulla lobortis tincidunt. Praesent sed sollicitudin orci. In feugiat, ligula posuere commodo maximus, orci nibh elementum ante, ullamcorper consequat diam justo et risus. Aliquam vitae ultrices leo, sed ultrices enim. Morbi quis aliquam est. Morbi in arcu nisl. Curabitur volutpat aliquam eros a tristique.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam nec ex arcu. Donec sit amet sodales dolor, vitae porttitor nibh. Phasellus mauris tellus, bibendum non scelerisque et, ultrices sed nunc. Morbi tempor neque a massa feugiat, non tristique urna feugiat. Sed at metus hendrerit, feugiat augue eu, pretium urna. Suspendisse ut luctus ex. Aliquam dapibus nisl quis mi porta cursus. Nam placerat lacus in eros auctor pharetra. Phasellus at pulvinar eros, viverra ullamcorper erat. Nullam ac quam erat. Vivamus neque dolor, pulvinar sed lacus id, bibendum varius mauris. Donec ornare dolor sagittis, lobortis erat in, ullamcorper sapien. Nam pellentesque consequat ante eu sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam elit metus, dictum quis lectus et, hendrerit hendrerit felis.

Aliquam congue tortor quis enim porttitor, venenatis condimentum enim faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum eget facilisis ipsum, ut imperdiet metus. Praesent ornare lacinia eros, ut semper eros porttitor nec. Aenean condimentum egestas nisi ac placerat. Integer vulputate ultrices egestas. Donec maximus quam arcu, sed lobortis tellus consectetur id. Mauris accumsan libero eu diam interdum condimentum. Mauris cursus ligula in rutrum vestibulum. Donec sed varius eros, ut convallis dolor. Sed arcu sem, iaculis eleifend nunc sed, tincidunt hendrerit elit. Nullam sed imperdiet arcu. Nunc enim ante, pretium non eros id, porttitor vulputate sem. Nullam nec scelerisque sapien, id congue sapien. Ut pulvinar ac felis vitae lobortis. Aenean bibendum vulputate aliquam.
      <footer>
        <div class = "imagecontent">              </div>   
     </footer>
      
  </div>
</div>

да!! у меня не будет возможности попробовать это до завтра, но, основываясь на запуске сниппета, это именно то, что я хочу! ты лучший <3

robert chen 29.06.2018 03:54

Другие вопросы по теме