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

D

DarkSRKI24

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.
 
K

Kuncode

Joined
Jan 30, 2023
Messages
107
Reaction score
13
DarkSRKI24 said:
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.
Click to expand...
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

Similar Threads

Remove class on hover 1
How to position the *tooltip* comment on these buttons? 9
Help with my responsive home page 2
I need help fixing my website 2
Slideshow not working properly 2
Having difficulty with the layout of these images / video for this web page 2
How can I get my menu inside of a menu to function properly? 1
When draggable=false & draggable=true dont work ? 1

Members online

No members online now.
Total: 26 (members: 0, guests: 26)
Robots: 240

Forum statistics

Threads
473,755
Messages
2,569,537
Members
45,022
Latest member
MaybelleMa

Latest Threads

Top