0xD34F

Надо ограничить высоту, чтобы было что скроллить. Попробуйте так, например:

max-height: 90%;
overflow: auto;

Неудивительно, что не помогло - border-bottom вы определили для ссылки, а не изображения.

Определите класс для ссылок, содержащих изображение, и назначьте border: none ему:

.a-image {
  border: none;
}

<a class="a-image"><img src="...

Да, можно сделать гораздо проще. Элементу задаёте transition:

#red {
  transition: opacity 0.2s;
}

Определяете класс, который будет изменять значение opacity:

#red.hidden {
  opacity: 0.5;
}

И переключаете его по клику:

$('#red').click(e => $(e.target).toggleClass('hidden'));

// или

document.querySelector('#red').addEventListener('click', e => {
  e.target.classList.toggle('hidden');
});

.recent:hover .info {

Селектор неправильный, .info находится не внутри, а после .recent. Делайте так:

.recent:hover ~ .info {

Задать элементу transition:

.item {
  transition: transform 1s;
}

Определить класс, который будет задавать смещение:

.move {
  transform: translateY(150px);
}

Переключать класс при клике:

$(document).on('click', '.item', function() {
  $(this).toggleClass('move');
});

https://jsfiddle.net/rx2tgc0m/

ИЛИ

Можно обойтись без js - перед элементом прячем чекбокс; сам элемент делаем label'ом, который будет переключать состояние этого чекбокса; смещаем элемент, если перед ним находится отмеченный чекбокс:

<input type="checkbox" id="xxx">
<label class="item" for="xxx">
  ...

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]:checked + .item {
  transform: translateY(150px);
}

https://jsfiddle.net/56y7vwjd/

Вы в :hover забыли transition написать перед opacity и transform.

добавьте хедеру margin: 0 auto;

Работает.

Я бы просто обернул всё это дело ещё одним div'ом и назначил ему transform: rotate(сколько там вам надо). Типа так.

Убрать margin-left и margin-top.
Добавить display: inline-block;.
Ширину и высоту указать относительные - 30% и 50%, например.

Похоже на то, что вам нужно?

<div class="heading">
  <p>hello, world!!</p>
  <p>fuck the world</p>
  <p>fuck everything</p>
</div>

.heading {
  display: inline-block;
  position: relative;
  width: 900px;
  height: 70px;
  background: red;
  overflow: hidden;
  font-size: 60px;
}
.heading > p {
  text-transform: uppercase;
  color: #fefefe;
  position: absolute;
  width: 900px;
  top: 0;
  left: 0;
  animation: text 6s infinite;
  margin: 0;
  padding: 0;
}
.heading > p:nth-child(1) { animation-delay:  0s; }
.heading > p:nth-child(2) { animation-delay: -4s; }
.heading > p:nth-child(3) { animation-delay: -2s; }

@keyframes text {
  0% {
    opacity: 1;
  }
  25%, 100% {
    margin-left: 50px;
    opacity: 0;
  }
}

Можно так.

Или так.

Так?

Ловите :hover на родителе, вместо img:hover пусть будет a:hover > img.

.class2:hover + .class3 {
  color: red;
}

У вас пробел лишний между .list и :hover. Должно быть так: .list:hover

Вы выставляете max-height равным 600, в то время как высота элемента - всего 50. Так что пока max-height уменьшается с 600 до 50, внешне ничего не меняется.

UPD. Как исправить. Могу предложить два варианта:

1) Менять max-height не у ul, а у li. Это позволит назначить конкретную высоту элементов. Типа так.

2) Для открытого состояния также определить transition: max-height. Подобрать временные функции так, чтобы при открытии списка сначала он разворачивался медленно, а в конце быстро. А при закрытии наоборот - сначала быстро, затем медленно. Типа так.

Гугл не помог.

Гугл помог. Думаю, развернуть стрелку в другую сторону сами сумеете.

mix-blend-mode

Так:

.test ul {
  color: red;
}

.test ul ul {
  color: black;
}

??

UPD. Вынесено из комментариев:

это решение требует, постоянно сбрасывать стили по умолчанию

В смысле - для вложенных элементов ul? Решим вопрос один раз для всех, вместо того, чтобы стилизовать .test ul ul, пусть будет

ul {
  color: initial;
}