Create an option page landing page

Question

I want to create a landing page such as a game. The visitor gets the opportunity to choose "Professional" or "Director".

It's easy to speak, but programming is hard for me, so I want:

2 divwith 2 different background-image, when someone is hoverabove one of the divs, I want the scale to scale background-image(IMAGE ONLY) and opacityplaced in the div to change from 50%to 80%.

And a really beautiful future will be to display the snow falling on the image.

This is what I want to create:

Before

After:

What I have achieved so far is 2 divs background-image, and I'm not even sure if this is the right way. Can someone please help me?

, , : ( div, )

, :

#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>

Hide result

, , , () .

Answer 1

, 2 divs padding div . background-size :hover. :hover, "" gif .

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>

Hide result

Answer 2

background-size: height width; opacity: value; . , , , . , div.

#d {
  background-image: url(https://cdn.pixabay.com/photo/2016/10/29/20/52/cincinnati-1781540_960_720.png);
  height: 200px;
  width: 200px;
  background-size: 100px 100px;
  background-repeat: no-repeat;
  background-position: center; 
  /*To make the transistion smooth*/
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
  opacity: 0.5;
}


#d:hover {
  background-size: 110px 110px;
  opacity: 0.8;
}

<div id='d'>
</div>

Hide result