Use CSS3 transitions with gradient backgrounds

后端 未结 16 1596
慢半拍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:24

    In the following, an anchor tag has a child and a grandchild. The grandchild has the far background gradient. The child in the near background is transparent, but has the gradient to transition to. On hover, the child's opacity is transitioned from 0 to 1, over a period of 1 second.

    Here is the CSS:

    .bkgrndfar {
      position:absolute;
      top:0;
      left:0;
      z-index:-2;
      height:100%;
      width:100%;
      background:linear-gradient(#eee, #aaa);
    }
    
    .bkgrndnear {
      position:absolute;
      top:0;
      left:0;
      height:100%;
      width:100%;
      background:radial-gradient(at 50% 50%, blue 1%, aqua 100%);
      opacity:0;
      transition: opacity 1s;
    }
    
    a.menulnk {
      position:relative;
      text-decoration:none;
      color:#333;
      padding: 0 20px;
      text-align:center;
      line-height:27px;
      float:left;
    }
    
    a.menulnk:hover {
      color:#eee;
      text-decoration:underline;
    }
    
    /* This transitions child opacity on parent hover */
    a.menulnk:hover .bkgrndnear {
      opacity:1;
    }
    

    And, this is the HTML:

    Transgradient
    

    The above is only tested in the latest version of Chrome. These are the before hover, halfway on-hover and fully transitioned on-hover images:

    Before Halfway After

提交回复
热议问题