Transition on :hover:before not working properly

Question

Basically what I'm trying to do is have a transition with transform applied on the :hover:before element so that when you hover with your mouse over ava.png the :before element smoothly appears instead of instantly.

I've tried adding the transition code to the :hover:after class (as seen in the code below) and I tried one of the solutions I found on StackOverflow, changing :hover to :before and adding the content + transition to that class. Needless to say none of my attempts worked or I wouldn't be here right now. (:D)

If anyone could take the time to help me out that'd be highly appreciated, thanks!

#header .inner {
  -moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
  -webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
  -ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
  transition: transform 1.5s ease, opacity 2s ease;
  -moz-transition-delay: 0.25s;
  -webkit-transition-delay: 0.25s;
  -ms-transition-delay: 0.25s;
  transition-delay: 0.25s;
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  position: relative;
  z-index: 1;
}

#slide1 {
  position: relative;
  margin-left: 147px;
  margin-top: 0px;
  z-index: 100;
  width: 98px;
  height: 92px;
  display: inline-block;
  background-image: url("https://www.upload.ee/image/6050955/ava.png");
}

#slide1:hover {
  position: relative;
}

#slide1:hover:before {
  content: url("https://www.upload.ee/image/6050956/ava_background_hoover.png");
  display: block;
  z-index: -1;
  position: absolute;
  margin-left: -150px;
  margin-top: -50px;
  -moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
  -webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
  -ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
  transition: transform 1.5s ease, opacity 2s ease;
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

#slide2 {
  position: relative;
  margin-left: 0px;
  margin-top: 0px;
  z-index: 100;
  width: 140px;
  height: 160px;
  display: inline-block;
  background-image: url("https://www.upload.ee/image/6050954/arrow.png");
}

<div class="inner">
  <a id="slide1" href="/insider-informatie/over-mij.html"></a>
  <div id="slide2"></div>
  <h1>Header 1</h1>
  <p>My text</p>
</div>

Answer 1

To animate transition you need a to have some kind of a change in the elements properties. This means that the element should be part of the page, displayed (ie no display: none) and visible (no visibility: hidden), but somehow invisible / transparent (opacity: 0 for example).

In your case, you don't create the :before element unless you want to display it. To solve that render the :before with scale(0), and on over change it to scale(1):

#header .inner {
  -moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
  -webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
  -ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
  transition: transform 1.5s ease, opacity 2s ease;
  -moz-transition-delay: 0.25s;
  -webkit-transition-delay: 0.25s;
  -ms-transition-delay: 0.25s;
  transition-delay: 0.25s;
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  position: relative;
  z-index: 1;
}

#slide1 {
  position: relative;
  margin-left: 147px;
  margin-top: 0px;
  z-index: 100;
  width: 98px;
  height: 92px;
  display: inline-block;
  background-image: url("https://www.upload.ee/image/6050955/ava.png");
}

#slide1:hover {
  position: relative;
}

#slide1:before {
  content: url("https://www.upload.ee/image/6050956/ava_background_hoover.png");
  display: block;
  z-index: -1;
  position: absolute;
  margin-left: -150px;
  margin-top: -50px;
  -moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
  -webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
  -ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
  transition: transform 1.5s ease, opacity 2s ease;
    -moz-transform: scale(0);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}

#slide1:hover:before {
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

#slide2 {
  position: relative;
  margin-left: 0px;
  margin-top: 0px;
  z-index: 100;
  width: 140px;
  height: 160px;
  display: inline-block;
  background-image: url("https://www.upload.ee/image/6050954/arrow.png");
}

<div class="inner">
  <a id="slide1" href="/insider-informatie/over-mij.html"></a>
  <div id="slide2"></div>
  <h1>Header 1</h1>
  <p>My text</p>
</div>