Hover state on an element stuttering when I'm close to the edge, or move my mouse really fast

Joined
Feb 2, 2023
Messages
1
Reaction score
0
I am having an issue. When I hover over the image, or really close to its border or I move my mouse out of the .wrapper-section too fast the transition stutters or is applied instantly (ignoring the transition timer).

JSFiddle

https://jsfiddle.net/DarkSRKI24/vjz32d8c/5/

HTML:

HTML:
<div class="wrapper-section">

    <div class="wrapper-img slika1">
      <a href="https://www.horizonsupply.co/collections/everything/products/alone-together-t-shirt" target="_blank"></a>
    </div>
    
    <div class="wrapper-img slika2">
      <a href="https://www.horizonsupply.co/collections/everything/products/bloodbath-hoodie" target="_blank"></a>
    </div>
    
    <div class="wrapper-img slika3">
      <a href="https://www.horizonsupply.co/collections/everything/products/there-is-a-hell-longsleeve"  target="_blank"></a>
    </div>
    
</div>

CSS:

CSS:
.wrapper-section {
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.wrapper-img {
    position: relative;
    height: 30rem;
    width: 30rem;
    border: 0.25rem solid #000000;
    
    
    background-repeat: no-repeat;
    background-size: cover;
    transition: 0.5s ease-in-out;
}


.wrapper-img a {
    position: relative;
    top: -0.25rem;
    left: -0.25rem;
    display: block;
    height: inherit;
    width: inherit;
}



.slika1{
    background-image: url(//cdn.shopify.com/s/files/1/0430/3745/products/Alone_Together_Back_Tee.jpg?v=1657121899);
}

.slika1:hover{
    background-image: url(//cdn.shopify.com/s/files/1/0430/3745/products/Alone_Together_Front_Tee.jpg?v=1657121899);
}



.slika2{
    background-image: url(//cdn.shopify.com/s/files/1/0430/3745/products/HSC_Bloodbath_Hoodie_Back_Updated.jpg?v=1631795756);
}

.slika2:hover{
    background-image: url(//cdn.shopify.com/s/files/1/0430/3745/products/HSC_Bloodbath_Hoodie_Front.jpg?v=1631795756);
}



.slika3{
    background-image: url(//cdn.shopify.com/s/files/1/0430/3745/products/HSC-There-is-a-hell-L_S-Front.jpg?v=1671103500);
}

.slika3:hover{
    background-image: url(//cdn.shopify.com/s/files/1/0430/3745/products/HSC-There-is-a-hell-L_S-Back.jpg?v=1671103502);
}

Any help would be highly appreciated, I'm doing it for a uni project, so I only know CSS and HTML.

I tried changing the display, the position, removing the border, and the hover selector in CSS but nothing worked for me, I don't know how to solve the transition problem and I couldn't find a solution online.
 
Joined
Jan 30, 2023
Messages
107
Reaction score
13
I am having an issue. When I hover over the image, or really close to its border or I move my mouse out of the .wrapper-section too fast the transition stutters or is applied instantly (ignoring the transition timer).

JSFiddle

https://jsfiddle.net/DarkSRKI24/vjz32d8c/5/

HTML:

HTML:
<div class="wrapper-section">

    <div class="wrapper-img slika1">
      <a href="https://www.horizonsupply.co/collections/everything/products/alone-together-t-shirt" target="_blank"></a>
    </div>
   
    <div class="wrapper-img slika2">
      <a href="https://www.horizonsupply.co/collections/everything/products/bloodbath-hoodie" target="_blank"></a>
    </div>
   
    <div class="wrapper-img slika3">
      <a href="https://www.horizonsupply.co/collections/everything/products/there-is-a-hell-longsleeve"  target="_blank"></a>
    </div>
   
</div>

CSS:

CSS:
.wrapper-section {
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.wrapper-img {
    position: relative;
    height: 30rem;
    width: 30rem;
    border: 0.25rem solid #000000;
   
   
    background-repeat: no-repeat;
    background-size: cover;
    transition: 0.5s ease-in-out;
}


.wrapper-img a {
    position: relative;
    top: -0.25rem;
    left: -0.25rem;
    display: block;
    height: inherit;
    width: inherit;
}



.slika1{
    background-image: url(//cdn.shopify.com/s/files/1/0430/3745/products/Alone_Together_Back_Tee.jpg?v=1657121899);
}

.slika1:hover{
    background-image: url(//cdn.shopify.com/s/files/1/0430/3745/products/Alone_Together_Front_Tee.jpg?v=1657121899);
}



.slika2{
    background-image: url(//cdn.shopify.com/s/files/1/0430/3745/products/HSC_Bloodbath_Hoodie_Back_Updated.jpg?v=1631795756);
}

.slika2:hover{
    background-image: url(//cdn.shopify.com/s/files/1/0430/3745/products/HSC_Bloodbath_Hoodie_Front.jpg?v=1631795756);
}



.slika3{
    background-image: url(//cdn.shopify.com/s/files/1/0430/3745/products/HSC-There-is-a-hell-L_S-Front.jpg?v=1671103500);
}

.slika3:hover{
    background-image: url(//cdn.shopify.com/s/files/1/0430/3745/products/HSC-There-is-a-hell-L_S-Back.jpg?v=1671103502);
}

Any help would be highly appreciated, I'm doing it for a uni project, so I only know CSS and HTML.

I tried changing the display, the position, removing the border, and the hover selector in CSS but nothing worked for me, I don't know how to solve the transition problem and I couldn't find a solution online.
To solve the stuttering issue, you can try applying backface-visibility: hidden and transform: translateZ(0) to the .wrapper-img class in CSS. This will make the browser's compositing and rendering faster for these elements, which should result in smoother transitions.

HTML:
<div class="wrapper-section">
  <div class="wrapper-img slika1">
    <a href="https://www.horizonsupply.co/collections/everything/products/alone-together-t-shirt" target="_blank"></a>
  </div>
  <div class="wrapper-img slika2">
    <a href="https://www.horizonsupply.co/collections/everything/products/bloodbath-hoodie" target="_blank"></a>
  </div>
  <div class="wrapper-img slika3">
    <a href="https://www.horizonsupply.co/collections/everything/products/there-is-a-hell-longsleeve"  target="_blank"></a>
  </div>
</div>

For the CSS :

CSS:
.wrapper-section {
  margin-bottom: 2rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
}

.wrapper-img {
  position: relative;
  height: 30rem;
  width: 30rem;
  border: 0.25rem solid #000000;
  backface-visibility: hidden;
  transform: translateZ(0);
  background-repeat: no-repeat;
  background-size: cover;
  transition: 0.5s ease-in-out;
}

.wrapper-img a {
  position: relative;
  top: -0.25rem;
  left: -0.25rem;
  display: block;
  height: inherit;
  width: inherit;
}

.slika1 {
  background-image: url(//cdn.shopify.com/s/files/1/0430/3745/products/Alone_Together_Back_Tee.jpg?v=1657121899);
}

.slika1:hover {
  background-image: url(//cdn.shopify.com/s/files/1/0430/3745/products/Alone_Together_Front_Tee.jpg?v=1657121899);
}

.slika2 {
  background-image: url(//cdn.shopify.com/s/files/1/0430/3745/products/HSC_Bloodbath_Hoodie_Back_Updated.jpg?v=1631795756);
}

.slika2:hover {
  background-image: url(//cdn.shopify.com/s/files/1/0430/3745/products/HSC_Bloodbath_Hoodie_Front.jpg?v=1631795756);
}

.slika3 {
  background-image: url(//cdn.shopify.com/s/files/1/0430/3745/products/HSC-There-is-a-hell-L_S-Front.jpg?v=1671103500);
}

.slika3:hover {
  background-image: url(//cdn.shopify.com/s/files/1/0430/3745/products/HSC-There-is-a-

Hope this help you :)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,813
Messages
2,569,696
Members
45,483
Latest member
TedDvb6626

Latest Threads

Top