Use CSS3 transitions with gradient backgrounds

后端 未结 16 1579
慢半拍i
慢半拍i 2020-11-21 22:18

I\'m trying to transition on hover with css over a thumbnail so that on hover, the background gradient fades in. The transition isn\'t working, but if I simply change it to

16条回答
  •  小蘑菇
    小蘑菇 (楼主)
    2020-11-21 23:00

    I use this at work :) IE6+ https://gist.github.com/GrzegorzPerko/7183390

    Don't forget about Text if you use a text element.

    .ahover {
        display: block;
        /** text-indent: -999em; ** if u use only only img **/
        position: relative;
    }
    .ahover:after {
        content: "";
        height: 100%;
        left: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        transition: all 0.5s ease 0s;
        width: 100%;
        z-index: 1;
    }
    .ahover:hover:after {
        opacity: 1;
    }
    .ahover span {
        display: block;
        position: relative;
        z-index: 2;
    }
    

提交回复
热议问题