如何在悬停时围绕圆圈形成环

Question

.images {
	width: 125px;
	border: 2px solid #FFF;
	border-radius: 100px;
	display: inline-block;
}

.images:hover {
	background: transparent;
	margin-top:4px;
	color: transparent !important;
	border:1px solid #999;
	
	/*{Shadow}*/
	box-shadow:inset 0 0 5px 0 #333;
	-moz-box-shadow:inset 0 0 5px 0 #333;
	-webkit-box-shadow:inset 0 1px 2px 0 #333, 0 1px 1px 0 #fff;

}

<img src="pic_mountain.jpg" class="images" alt="Save icon"/>

我想在悬停时环绕我的圆形图像。我不希望我的图像有边框。我想要离形象有点远的戒指。我如何用 css 做到这一点？

Answer 1

body{
  padding: 50px;
  background: #fff;
}
div{
  position: relative;
  width: 150px;
  height: 150px;
  background: #004080;
  border-radius: 50%;
  transition: 0.3s;
}
div:before{
  content: '';
  position: absolute; top: 5px; left: 50%;
  margin-left: -60px;
  width: 120px;
  height: 80px;
  border-radius: 100% 100% 70% 70%;
  background: #b5cacf; /* Old browsers */
background: -moz-linear-gradient(top, #b5cacf 0%, #5c86ac 50%, #004080 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #b5cacf 0%,#5c86ac 50%,#004080 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #b5cacf 0%,#5c86ac 50%,#004080 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5cacf', endColorstr='#004080',GradientType=0 );
}
div:hover{
  box-shadow: 0 0 0 5px #fff, 0 0 0 7px #0A5ACB;
}

<div></div>

Answer 2

将您的图片封装在一个更大的 div 中，并在其上加上边框，border-radius:50%;