圖像上的圓圈懸停效果

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>