Is there a way to change how the hover effect works between mobile browsers? [closed]

https://remarkable-unicorn-e5d5f8.netlify.app/index.html

Above is a link to my project in question. All hover functions work as expected on a computer. The hover functions work with a single tap on mobile when opened with google chrome. But when I viewed the page with safari, the interface was very slow and you have to hold down to activate the hover effect. Is there a way to change that and make the safari interaction more like google chrome? My goal would be for the hover effect to be activated with a single tap instead of having to hold down on the screen, just like chrome browser.

Also, the images on the ‘work’ page were not resized and are large images. Would that be effecting the hover effect or efficiency on safari?

CSS below

.items {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
}

.item {
   position: relative;
   background: $main-color;
   overflow: hidden;
   
   &::after {
      content: '';
      position: absolute;
      display: block;
      background: inherit;
      opacity: 0.9;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform: scale(2) translateX(-75%) translateY(-75%) rotate(-28deg);
      transition: transform 3s cubic-bezier(0.2, 1, 0.3, 1);
   }

   // Bring in main color overlay
   &:hover:after {
      transform: scale(2) translateX(0) translateY(0) rotate(-28deg);
   }

   // Scale image on hover
   &:hover &-image {
      transform: scale(1.2);
   }

   // Bring in text on hover
&:hover &-text {
   opacity: 1;
   transform: translateY(0);
}

&-image {
   height: auto;
   transform: translateZ(0);
   display: block;
   transition: transform 750ms cubic-bezier(0.2, 1, 0.3, 1);
}

&-image::before {
   content: '';
   display: block;
   padding-top: 75%;
   overflow: hidden;
}

&-image img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: auto;
   line-height: 0;
}

&-text {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   opacity: 0;
   text-align: center;
   z-index: 1;
   color: #fff;
   transform: translateY(-20%);
   transition: opacity 500ms cubic-bezier(0.2, 1, 0.3, 1), transform 500ms cubic-bezier(0.2, 1, 0.3, 1);
   transition-delay: 300ms;
}

&-text-wrap {
   position: absolute;
   width: 100%;
top: 50%;
transform: translateY(-50%);
}

&-text-title {
   font-size: 2rem;
   padding: 0 1rem;
   margin: 5px 0 0 0;
}

&-text-category {
   text-transform: uppercse;
   font-size: 1.2rem;
   opacity: 0.7;
   margin: 0;
}
}

---

<section id="work-a" class="text-center py-3">
   <div class="container">
      <h2 class="section-title">My Work</h2>
      <div class="bottom-line"></div>
      <p class="lead">
         Check out some of my projects...
      </p>
      <div class="items">
         <div class="item">
            <div class="item-image">
               <img src="/img/items/item1.png" alt="">
            </div>
            <div class="item-text">
               <div class="item-text-wrap">
                  <p class="item-text-category">Design</p>
                  <h2 class="item-text-title">Great Gradients</h2>
               </div>
            </div>
         </div>
         <div class="item">
            <div class="item-image">
               <img src="/img/items/item2.png" alt="">
            </div>
            <div class="item-text">
               <div class="item-text-wrap">
                  <p class="item-text-category">UI/UX</p>
                  <h2 class="item-text-title">World Experience</h2>
               </div>
            </div>
         </div>
         <div class="item">
            <div class="item-image">
               <img src="/img/items/item3.png" alt="">
            </div>
            <div class="item-text">
               <div class="item-text-wrap">
                  <p class="item-text-category">Photography & Design</p>
                  <h2 class="item-text-title">Vanishing</h2>
               </div>
            </div>
         </div>
         <div class="item">
            <div class="item-image">
               <img src="/img/items/item4.png" alt="">
            </div>
            <div class="item-text">
               <div class="item-text-wrap">
                  <p class="item-text-category">Design</p>
                  <h2 class="item-text-title">Gap INC</h2>
               </div>
            </div>
         </div>
         <div class="item">
            <div class="item-image">
               <img src="/img/items/item5.png" alt="">
            </div>
            <div class="item-text">
               <div class="item-text-wrap">
                  <p class="item-text-category">Mobile UI Design</p>
                  <h2 class="item-text-title">Face The Experience</h2>
               </div>
            </div>
         </div>
         <div class="item">
            <div class="item-image">
               <img src="/img/items/item6.png" alt="">
            </div>
            <div class="item-text">
               <div class="item-text-wrap">
                  <p class="item-text-category">Design Concept</p>
                  <h2 class="item-text-title">Bezier Curves</h2>
               </div>
            </div>
         </div>
         <div class="item">
            <div class="item-image">
               <img src="/img/items/item7.png" alt="">
            </div>
            <div class="item-text">
               <div class="item-text-wrap">
                  <p class="item-text-category">Photography</p>
                  <h2 class="item-text-title">Dock Ponder</h2>
               </div>
            </div>
         </div>
         <div class="item">
            <div class="item-image">
               <img src="/img/items/item8.png" alt="">
            </div>
            <div class="item-text">
               <div class="item-text-wrap">
                  <p class="item-text-category">Web Applications</p>
                  <h2 class="item-text-title">Restaurant App</h2>
               </div>
            </div>
         </div>
         <div class="item">
            <div class="item-image">
               <img src="/img/items/item9.png" alt="">
            </div>
            <div class="item-text">
               <div class="item-text-wrap">
                  <p class="item-text-category">Social Network Concept</p>
                  <h2 class="item-text-title">FriendFeed
               </div>
            </div>
         </div>
      </div>
   </div>
</section>