title: Hover works fine on chrome but on safari the div that shows up on hover is displayed next to the first div?
body: <p>So the hover works perfectly fine on chrome but when I look at it in safari the div that shows up on hover is displayed directly to the right of the div it should be on top of. Not sure why this isn't working properly in all browsers? Any help would be great! </p>
  
  <p>Here is the HTML: </p>
  
  <pre><code> &lt;div class="appdesign"&gt;
   &lt;img class="appmockup" src="img.jpg"/&gt;
   &lt;div class="apptext" style="display:none"&gt;
   &lt;p class="apptexttitle"&gt;Name&lt;/p&gt;
   &lt;p class="apptextinfo"&gt;Mobile App Design&lt;br&gt;&lt;br&gt;Insert info&lt;/p&gt;
   &lt;button&gt;
   &lt;a href="appdesign.html"&gt;View Project&lt;/a&gt;
   &lt;/button&gt;
   &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>Here is the CSS</p>
  
  <pre><code>.appdesign{
     display: inline-flex;
   img{
    height: 450px;
    width: 650px;
    margin-bottom: 30px;
    }
  .appdesign img:hover .apptext{
    opacity: 0.5;  
   }
  .apptext{
    display: block;
    opacity: 0.8;
    position: absolute;
    background-color: $customgrey;
    height: 450px;
    width: 650px;
    margin-bottom: 30px;
    z-index: 100;
  
  .apptexttitle{
    color: $white;
    font-size: 30px;
    border-bottom: 2px solid $white;
    border-top: 2px solid $white;
    width: 15vw;
    padding: 10px;
    text-align: center;
   }
   }
  .apptextinfo{
    width: 40vw;
    font-size: 18px;
    font-family: Merriweather;
   }
   }
  </code></pre>
  
  <p>Here is the JS</p>
  
  <pre><code>&lt;script&gt;
  $('.appdesign').hover(function(){
  $(this).find('.apptext').fadeIn('slow');
  },
  function(){
  $(this).find('.apptext').stop().fadeOut('slow');
  });
  &lt;/script&gt;
  </code></pre>