Creating a option-choice landing page

Question

I want to create a landing page like a game. The visitor gets the option either to chose "Professioneel" or "Speels".

Telling it is easy but programming it is hard for me, so this is what I want:

2 div's with 2 different background-image when someone hover over one of the divs I want the background-image to scale (ONLY THE IMAGE) and the opacity placed on the div to change from 50% to 80%.

And a really nice future would be to display a snow falling gif over the image.

This is what I want to create:

Before

After:

What I have achieved till now is making the 2 divs with a background-image and I'm not even sure if that is the right way. Can someone please help me out?

This is what happens when I hover with my current code: (the whole div scales, not only the image)

As an user asked, here some code:

#containerEntree {
  height: 100vh;
  width: 1920px;
  padding-left: 0;
  padding-right: 0;
}

#professioneelContainer {
  background-color: red;
  text-align: center;
  width: 1920px;
  height: 475px;
}

#speelsContainer {
  background: red;
  width: 100%;
  height: 475px;
  text-align: center;
}

.entreeTekst:hover {
  transform: scale(1.2);
}

.entreeTekst {
  width: 100%;
  height: 100%;
  position: relative;
  transition: all .5s;
  margin: auto;
}

.entreeTekst > span {
  color: white;
  /* Good thing we set a fallback color! */
  font-size: 70px;
  position: absolute;
}

<div class="container" id="containerEntree">
  <div id="professioneelContainer">
    <div class="entreeTekst">
      <span>professioneel</span>
      <img src="img/professioneel.jpg" />
    </div>
  </div>
  <div id="speelsContainer">
    <div class="entreeTekst">
      <span>Speels</span>
      <img src="img/speels.jpg" />
    </div>
  </div>
</div>

Please note that I'm still working on it so don't say that this (of course) won't work.

Answer 1

You can do this by using 2 divs with background images and use padding on the div to replicate the aspect ratio of the background image. Scale the image using background-size on :hover. Then use a pseudo element to create the color overlay and transition the opacity on :hover, then use the other pseudo element on top of that with the text and the "snow" gif as a background.

body {
  width: 600px;
  max-width: 80%;
  margin: auto;
}
div {
  background: url('https://static.tripping.com/uploads/image/0/5240/towns-funny-names-us_hero.jpg') center center no-repeat / 100%;
  height: 0;
  padding-bottom: 33.33333%;
  position: relative;
  transition: background-size .25s;
}
.speel {
  background-image: url('http://www.luketingley.com/images/large/The-Punchbowl-Web-Pano.jpg');
}
div::after, div::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}
div::before {
  opacity: .5;
  transition: opacity .25s;
}
.pro::before {
  background: blue;
}
.speel::before {
  background: red;
}
div::after {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: sans-serif;
  font-size: 1.5em;
  font-weight: bold;
}
.pro::after {
  content: 'PROFESSIONEEL';
}
.speel::after {
  content: "SPEELS";
}

div:hover::after {
  background: url('https://media.giphy.com/media/26BRyql7J3iOx875u/giphy.gif') center center no-repeat / cover;
}
div:hover::before {
  opacity: 0.8;
}
div:hover {
  background-size: 150%;
}

<div class="pro">
</div>
<div class="speel">
</div>