图像上的圆圈悬停效果

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> 

Answer 2

你可以使用CSS。 它包括浏览器兼容的webkit。

img{
  border-radius: 50%;
  transition-duration: 0.25s;
  -webkit-transition-duration: 0.25s;;
  -moz-transition-duration: 0.25s;;
  -ms-transition-duration: 0.25s;;
}

img:hover{
 border-radius: 0%;
}

Answer 3

使用border-radius和：hover来获得所需的结果。

 img{ border-radius: 50%; transition-duration: 0.25s; } img:hover{ border-radius: 0%; } 

 <img src="https://placeimg.com/64/64/animals?t=1513765419166"/> 

编辑已添加的transition-duration: 0.25s; 添加所需的动画效果

Answer 4

另一种可能的解决方案是使用onmouseover和onmouseout属性。

基本上，只要您将鼠标指向图像或图像外部，就会触发事件。 您可以使用它来更改图像的边界半径。

  function normalImage(image){ image.style.borderRadius = "0%"; } function roundedImage(image){ image.style.borderRadius = "50%"; } 

 img{ border-radius: 50%; } 

  <img onmouseover="normalImage(this)" onmouseout="roundedImage(this)" width="600" height="445" src="http://i.prntscr.com/cC-VFJNfRbqxjohddP9AGw.png"> 

Answer 5

这是一个解决方案（带过渡）。

 img { border-radius: 50%; transition: border-radius 1s; } img:hover { border-radius: 0; } 

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

Answer 6

您还可以使用以下内容

#myimage {
background-color: #679b08;
display: table-cell;
vertical-align: middle;
width: 320px;
height: 320px;
text-align: center;
border-radius: 300px;
color: #fff;
text-transform: uppercase;
font-size: 24px;
font-family: Verdana;
animation: expand-in .5s ease-in;
animation-delay: 0s;
background-image: url('http://i.prntscr.com/cC-VFJNfRbqxjohddP9AGw.png');
background-size: cover;
}

#myimage:hover {
animation: expand-out .5s ease-out;
animation-delay: 0s;
animation-fill-mode: forwards;
}

@keyframes expand-in {
0% {
    width: 600px;
    height: 500px;
    border-radius: 5px;
}
100% {
    width: 320px;
    height: 320px;
    border-radius: 300px;
}
}

@keyframes expand-out {
0% {
    width: 320px;
    height: 320px;
    border-radius: 300px;
}
100% {
    width: 600px;
    height: 500px;
    border-radius: 5px;
}
}

然后将您的HTML更改为

  <div id ="myimage">
  </div>

Answer 7

您可以使用伪元素和图像作为背景，这样可以避免使用动画拉伸图像，并且可以通过调整顶部/右侧/底部/左侧值来轻松控制圆的位置。

 #myimage { background-color: #679b08; position: relative; height: 445px; width: 600px; margin: auto; } #myimage:before { content: ""; position: absolute; top: 50px; bottom: 50px; right: 120px; left: 120px; border-radius: 50%; background-image: url(http://i.prntscr.com/cC-VFJNfRbqxjohddP9AGw.png); background-size: auto; background-position: center; background-repeat: no-repeat; transition: 0.5s; } #myimage:hover::before { top: 0; bottom: 0; right: 0; left: 0; border-radius: 0; } 

 <div id="myimage"> </div> 

Answer 8

也许我不理解......我认为它必须是一个圆圈。 （全屏以实际尺寸查看）

 #myimage{ background-color: #ffff; text-align: center; height:547px; width:547px; display:block; margin:0 auto; border-radius:50%; overflow:hidden; transition-duration: 0.25s; } #myimage img{ display:inline-block; margin:0 auto; height:100%; width:auto; position:relative; left:-138px; transition-duration: 0.25s; } #myimage:hover img{left:0;} #myimage:hover{ width:823px; border-radius:0; } 

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