html - 图片上的圆圈悬停效果

Question

我想要一张看起来像这样的图片(背景应该是白色的——不像我的图片那样透明):

当我将鼠标悬停在该图片上时，圆圈应该完全展开并显示我的原始图片，如下所示:

为了做到这一点，我尝试了这样的事情:

#myimage{
    background-color: #679b08;
    display: table-cell;
    vertical-align: middle;
    height: 50px;
    width: 50px;
    text-align: center;
    border-radius: 30px;
    color: #fff;
    text-transform: uppercase;
    font-size: 24px;
    font-family: Verdana;
    
    animation: expand-in .5s ease-out;
    animation-delay: 0s;
    animation-fill-mode: backwards;
  }
  #myimage:hover{
    animation: expand-out .5s ease-out;
    animation-delay: 0s;
    animation-fill-mode: forwards;
  }
  
  @keyframes expand-in{
    0%{
      width: 300px;
      height: 100px;
      border-radius: 5px;
    }
    
    100%{
      width: 120px;
      height: 120px;
      border-radius: 60px;
    }
  }
  @keyframes expand-out{
    0%{
      width: 120px;
      height: 120px;
      border-radius: 60px;
    }
    
    100%{
      width: 600px;
      height: 200px;
      border-radius: 5px;
    }
  }

<div id ="myimage">
<img width="600" height="445" src="http://i.prntscr.com/cC-VFJNfRbqxjohddP9AGw.png">
</div>

这里还有 jsfiddle 链接:https://jsfiddle.net/bq89efr8/

问题是我的圆圈在图片后面，它无法正确居中并显示我的图片，如果可能的话，我只想在 CSS 和 HTML 上工作(尽管我不介意使用一些 jquery)!

Answer 1

为什么要使用动画？您可以在 #myimage div 内的图像上使用 CSS transition 属性来执行此操作。

#myimage{
    background-color: #fff;
    display: table-cell;
    vertical-align: middle;
    height: 50px;
    width: 50px;
    text-align: center;
    border-radius: 30px;
    color: #fff;
    text-transform: uppercase;
    font-size: 24px;
    font-family: Verdana;
  }
  #myimage img {
    transition: all .3s ease-in-out;
    border-radius: 100%;
  }
  #myimage img:hover {
    border-radius: 0%;
  }

<div id ="myimage">
<img width="600" height="445" src="http://i.prntscr.com/cC-VFJNfRbqxjohddP9AGw.png">
</div>