1

I want to use hover effects such as the ones in this tutorial, but to my dismay the effect does not work responsively. There are also problems at different zoom levels and in Firefox as you will see in these screenshots. (Here is a codepen that illustrates the problem).

100% Zoom in Chrome:

enter image description here

90% in Chrome:

enter image description here

And in Firefox the effect does not work at all.

On hover in Chrome (rotating dotted line):

enter image description here

On hover in Firefox (no dotted line):

enter image description here

How can I get the effect to work responsively? Both across browsers and at different zoom levels.

Here are some code snippets that illustrate the method:

    <div class="hi-icon-wrap hi-icon-effect-4 hi-icon-effect-4b">
        <a href="#set-4" class="column product hi-icon product-icon"><div class="icon-text">Product</div></a>
    </div>

CSS:

.hi-icon-effect-4b .hi-icon:hover {
    -webkit-transition: box-shadow 0.2s;
    -moz-transition: box-shadow 0.2s;
    transition: box-shadow 0.2s;
}

.hi-icon-effect-4b .hi-icon:hover:after {
    -webkit-animation: spinAround 9s linear infinite;
    -moz-animation: spinAround 9s linear infinite;
    animation: spinAround 9s linear infinite;
}

@-webkit-keyframes spinAround {
    from {
        -webkit-transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes spinAround {
    from {
        -moz-transform: rotate(0deg)
    }
    to {
        -moz-transform: rotate(360deg);
    }
}
@keyframes spinAround {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(360deg);
    }
}

Play with the codepen here. Thanks for your ideas!

Nick B
  • 9,267
  • 17
  • 64
  • 105
  • I know Firefox renders `dotted` and `dashed` borders with border radius as solid; "Dotted and dashed rounded border corners are rendered as solid in Firefox". – Simon G Sep 21 '15 at 19:12
  • Thanks @SimonGooder. I am fine with it not rendering in Firefox. More importantly though is the zoom problem. I don't know where to start addressing that.. Any ideas to help? Thanks much – Nick B Sep 21 '15 at 19:14
  • 1
    Instead of using the pseudo classes `:after` and `:before` I would try something like this: `.product-container` `.product-circle` `.product-icon` add the border to `.product-circle`, and position the `.product-icon` absolutely in the middle of the `.product-container`. If you layer them using `z-index` you will be able to sort this out. The `:before` and `:after` pseudo classes are complicating things! – Simon G Sep 21 '15 at 19:21

2 Answers2

0

Here is an attemp to solve it.

I avoid using borders, and handle everything with backgrounds: some for the stripes, another one to hide-reveal the effect, and another one to mask the inner circle.

Now it is responsive (the size of the border is the padding, that can be set as a percentage), and works ok in FF.

The backgrounds have different colors so that it is easy to see which is each one, and the rotation is delayed also to make it easier to see what is happening

But now it is failing in IE ....

Hopefully somebody can solve this 

.hi-icon {
    width: 100px;
    height: 100px;
    position: relative;
    font-size: 50px;
    padding: 50px;
    border-radius:  50%;
}

.hi-icon:after {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    padding: 3%;
    border-radius:  50%;
    background-image: linear-gradient(lightgray, lightgray),          
    linear-gradient(transparent 30%, red 70%),           
    linear-gradient(45deg, blue 0%, blue 25%, transparent 25%, transparent 50%, blue 50%, blue 75%, transparent 75%, transparent 100%),   
    linear-gradient(-45deg, green 0%, green 25%, transparent 25%, transparent 50%, green 50%, green 75%, transparent 75%, transparent 100%),  
    linear-gradient(225deg, blue 0%, blue 25%, transparent 25%, transparent 50%, blue 50%, blue 75%, transparent 75%, transparent 100%),  
    linear-gradient(135deg, blue 0%, blue 25%, transparent 25%, transparent 50%, blue 50%, blue 75%, transparent 75%, transparent 100%);
    background-position: center center,bottom center,top left,bottom left,bottom right,top right;
    background-size: 100% 100%,100% 1000%,50% 50%,50% 50%,50% 50%,50% 50%;
    background-clip: content-box,border-box,border-box,border-box,border-box,border-box;
    background-repeat:no-repeat;
    transition: background-position 1s;
    z-index: -1;
}

.hi-icon:hover:after {
    background-position: center center,top center,top left,bottom left,bottom right,top right;
    animation: rotate 3s linear infinite 1s;
}

@keyframes rotate {
    0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}
<div class="hi-icon">TEST</div>
vals
  • 61,425
  • 11
  • 89
  • 138
-1

This is a firefox Bug. Check out some other options here. If you want the exact same hover effect.

Community
  • 1
  • 1
emles
  • 35
  • 10