petyagrill

Перенести transition в :hover

.certificate {
  width: 250px;
  margin: 100px 30px 10px 30px;
}

.certificate:hover {
  transition: transform 0.5s;
  transform: scale(2);
}

Чаще всего ответы находятся в DevTools


Ну и я бы советовал использовать немного другой формат использования шрифтов

@font-face {
	font-family: 'GothamPro';
	src: url('../fonts/GothamPro.eot?') format('eot'), 
	     url('../fonts/GothamPro.otf')  format('opentype'),
	     url('../fonts/GothamPro.woff') format('woff'), 
	     url('../fonts/GothamPro.ttf')  format('truetype'),
	     url('../fonts/GothamPro.svg#GothamPro') format('svg');
}
@font-face {
    font-family: 'GothamPro';
    src: url('../fonts/GothamPro-Light.otf?') format('opentype'),
    url('../fonts/GothamPro-Light.eot?') format('eot'),
    url('../fonts/GothamPro-Light.woff') format('woff'),
    url('../fonts/GothamPro-Light.ttf')  format('truetype');
    font-weight:300;
}

В таком случае можно в нужном месте использовать только font-weight

Замените

.btn_up a:hover {
  color: white;
}

На

.btn_up:hover a{
  color: white;
}

Или вы до конца мысль не изложили или вопрос не задали, возможно даже сами не до конца понимаете то что именно не понимаете.
Если вы так сильно привязались к сетке, то вместо книги читайте исходники bootstrap.

Почему именно %? Есть же px,em... Или вы считаете если где-то так написано то пикселями нельзя сделать сайт адаптивным? Можно, при чем и без сетки!!!

Читая другие ваши вопросы, стало понятно что теории у вас много (в которой вы постоянно сомневаетесь), ну а опыта крайне мало. Возьмите бесплатный псд макет, и не используя css генераторы в brackets или что там ещё бывает, не используя bootstrap и прочие готовые сетки. Просто с нуля сверстайте, гуглите, смотрите исходники других сайтов, пошагово научитесь верстать, не копипастите код, не халтурьте. Это по моему единственный способ наконец понять почему делают именно конкретным способом. Учитесь на своих ошибках. В сложных ситуациях задавайте конкретные вопросы со ссылками на сделанную вами работу. С конкретным описанием проблемы. За одно просите критику. Потратив некоторое время за практикой ваши сомнения пропадут, ну а теория наконец станет полезной.

Практика ваше все!
Надеюсь был полезным.

UPD: что касается вопроса, там действительно не понятно что именно вы не понимаете

набросил на скорую руку
пример решения
надо подточить под себя

если быстро хочется решить проблему то добавьте в css

.grayscale+p {
      pointer-events:none;
  }

Достаточно стандартного css
доки тут, тут, и тут

все очень просто, учитывая вашу конструкцию
изменен только код css
jsfiddle.net/kLzd2vj1/2