title: Layering images in html and div sizing
body: <p>First what I want to do is make the images not go through the fixed buttons.
  Here's how it currently looks like:
  <a href="https://i.stack.imgur.com/OzKCC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OzKCC.png" alt="Issue 1" /></a></p>
  <p>and as you can see  this is what happens. What am I doing wrong?
  Second, how do I scale the divs? I want the image sizes to be kept the same but to fix the issue of the div size. What currently happens is when I hover to the right of the images the hover animation shows up but it shouldn't
  <a href="https://i.stack.imgur.com/r9lnJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/r9lnJ.png" alt="Issue 2" /></a>
  Here's my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;&lt;title&gt;Moja strona&lt;/title&gt;
  &lt;style type=text/css&gt;
  h1 {text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff; font-size: 50px; color: white;}
  body {background-color: 0d0d0d; font-family: "Vibur", sans-serif;}
  p {text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff; color: white; font-size: 25px;}
  span {font-size: 27px; }
  li {text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff; color: white; font-size: 25px;}
  img {height: 100px; width: 200px; padding: 10px 0px 0px 0px;}
  .clock {background-color: 0d0d0d; text-align: center; margin: 2px 0px 0px 1190px; font-size: 30px; position: fixed; border-radius: 10px;   color: #fff; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; border: 5px solid white;}
  .button2 {
      position: fixed;
      margin: 0px 0px 0px 0px;
      width: 610px;
      height: 65px;
      font-size: 25px;
      text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
      background-color: rgba(13, 13, 13, 0);
      display: inline-block;
      transition-duration: 0.3s;
      border: 5px solid white;
      color: white;
      border-radius: 10px;
      background: linear-gradient(-45deg, #0d0d0d, #262626, #0d0d0d, #262626);
      background-size: 400% 400%;
      animation: gradient 10s linear infinite normal;
      height: 65px;
  }
  @keyframes gradient {
      0% {background-position: 0% 50%;}
      50% {background-position: 100% 50%;}
      100% {background-position: 0% 50%;}
  }
  .button2:hover {margin: 0px 0px 0px 0px; width: 610px; height: 65px; font-size: 25px; background-color: ffffff; display: inline-block; transition-duration: 0.3s; border: 5px solid; border-color: 808080; color: white;}
  .button2:active {text-shadow: 0 0 2px #808080, 0 0 4px #808080, 0 0 3px #808080; margin: 0px 0px 0px 0px; width: 610px; height: 65px; font-size: 25px; background-color: f2f2f2; display: inline-block; transition-duration: 0.3s; border: 4px solid; border-color: 808080; color: 808080;}
  .button3 {
      position: fixed;
      margin: 0px 0px 0px 620px;
      width: 560px;
      height: 65px;
      font-size: 25px;
      text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
      background-color: rgba(13, 13, 13, 0);
      display: inline-block;
      transition-duration: 0.3s;
      border: 5px solid white;
      color: white;
      border-radius: 10px;
      background: linear-gradient(-45deg, #0d0d0d, #262626, #0d0d0d, #262626);
      background-size: 400% 400%;
      animation: gradient 10s linear infinite normal;
      height: 65px;
  }
  @keyframes gradient {
      0% {background-position: 0% 50%;}
      50% {background-position: 100% 50%;}
      100% {background-position: 0% 50%;}
  }
  .button3:hover {margin: 0px 0px 0px 620px; width: 560px; height: 65px; font-size: 25px; background-color: ffffff; display: inline-block; transition-duration: 0.3s; border: 5px solid; border-color: 808080; color: white;}
  .button3:active {text-shadow: 0 0 2px #808080, 0 0 4px #808080, 0 0 3px #808080; margin: 0px 0px 0px 620px; width: 560px; height: 65px; font-size: 25px; background-color: f2f2f2; display: inline-block; transition-duration: 0.3s; border: 4px solid; border-color: 808080; color: 808080;}
  .container {position: relative; width: 50%;}
  .image {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
  }
  
  .middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 15%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%)
  }
  
  .container:hover .image {
    opacity: 0.3;
  }
  
  .container:hover .middle {
    opacity: 1;
  }
  
  .text {
      color: ffffff;
      text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;
    font-size: 25px;
    padding: 16px 32px;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p id="date" class="clock"&gt;&lt;/p&gt;
    &lt;script&gt;
    setInterval(function(){
    date = new Date();
    sekundy = date.getSeconds();
    if (sekundy&lt;10) sekundy = "0"+sekundy;
     minuty = date.getMinutes();
    if (minuty&lt;10) minuty = "0"+minuty;
     godziny = date.getHours()
    if (godziny&lt;10) godziny = "0"+godziny;
     dzien = date.getDay();
     data = date.getDate();
     miesiac = date.getMonth();
     rok = date.getFullYear();
    document.getElementById('date').innerHTML = data+"."+((miesiac+1)%12)+"."+rok+"&lt;br&gt;&lt;span&gt;"+godziny+":"+minuty+":"+sekundy;
  },1000);
    &lt;/script&gt;&lt;/span&gt;
  &lt;a href="strona3.html"&gt;&lt;button class="button2"&gt;&lt;strong&gt;O mnie&lt;/strong&gt;&lt;/button&gt;&lt;/a&gt;
  &lt;a href="strona2.html"&gt;&lt;button class="button3"&gt;&lt;strong&gt;Zainteresowania&lt;/strong&gt;&lt;/button&gt;&lt;/a&gt;
  &lt;br&gt;&lt;br&gt;&lt;h1&gt;Zainteresowania&lt;/h1&gt;
  &lt;p&gt;&lt;strong&gt; Głównie interesuję się: &lt;br&gt;
  &lt;ul&gt;&lt;li&gt;Programowaniem &lt;div class="container"&gt;&lt;img src="programowanie2.png" class="image" style="width:30%"&gt;&lt;div class="middle"&gt;&lt;div class="text"&gt;Programowanie&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/li&gt;
      &lt;p&gt;Około rok temu zrobiłem swoją pierwszą stronę w html. Obejrzałem serię poradników i później korzystałem z aplikacji i nauczyłem się baz &lt;strong style="color: orange; text-shadow: 0 0 2px orange, 0 0 4px orange, 0 0 3px orange; "&gt;HTML&lt;/strong&gt; i &lt;strong style="color: blue; text-shadow: 0 0 2px blue, 0 0 4px blue, 0 0 3px blue;"&gt;CSS&lt;/strong&gt;. Pomagając bratu zrozumieć &lt;strong style="color: yellow; text-shadow: 0 0 2px yellow, 0 0 4px yellow, 0 0 3px yellow;"&gt;C++&lt;/strong&gt; poznałem jego podstawy. Około 3 tygodnie temu obejrzałem 1-godzinny poradnik dotyczący &lt;strong style="color: lightgreen; text-shadow: 0 0 2px lightgreen, 0 0 4px lightgreen, 0 0 3px lightgreen; "&gt;Pythona&lt;/strong&gt; i nauczyłem się jak się nim posługiwać.&lt;br&gt;
      &lt;li&gt;Graniem w gry&lt;div class="container"&gt;&lt;img src="graniewgry.png" class="image" style="width:30%"&gt;&lt;div class="middle"&gt;&lt;div class="text"&gt;Granie w gry&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/li&gt;
      &lt;p&gt;W wolnym czasie w celu odpoczynku lubię sobie pograć w różne gry. Najbardziej interesują mnie &lt;strong style="color: darkgreen; text-shadow: 0 0 2px darkgreen, 0 0 4px darkgreen, 0 0 3px darkgreen; "&gt;gry z wieloma graczami&lt;/strong&gt; zamiast tylko ze samym sobą. Moimi ulubionymi gatunkami gier są &lt;strong style="color: lightred; text-shadow: 0 0 2px lightred, 0 0 4px lightred, 0 0 3px lightred; "&gt;MMO, RPG, Dungeon Crawler i wiele innych.&lt;/p&gt;
      &lt;br&gt;&lt;li&gt;Tworzeniem wideo&lt;div class="container"&gt;&lt;img src="nagrywanie.png" class="image" style="width:30%;"&gt;&lt;div class="middle"&gt;&lt;div class="text"&gt;Nagrywanie wideo&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/li&gt;
      &lt;p&gt;Od kilku lat tworzę widea na platformie &lt;strong style="color: red; text-shadow: 0 0 2px red, 0 0 4px red, 0 0 3px red; "&gt;YouTube&lt;/strong&gt;. Na obecną chwilę mam &lt;strong style="color: red; text-shadow: 0 0 2px red, 0 0 4px red, 0 0 3px red; "&gt;457 subskrybentów&lt;/strong&gt;. Zazwyczaj wrzucam 1 wideo na tydzień. Posiadałem kilka kanałów, ale na tą chwilę posiadam tylko jeden. Moim celem jest &lt;strong style="color: red; text-shadow: 0 0 2px red, 0 0 4px red, 0 0 3px red; "&gt;1000 subskrybentów&lt;/strong&gt;.
  &lt;/strong&gt;&lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  
  I will gladly appreciate any help </p>