Question

我试图找到一个解决方案，解决我遇到的一些CSS问题。目标是从带有居中文本的方形纯色框切换到圆形图像。虽然我目前的作品虽然很有说服力，但我确定，彩色div和图像的大小相同，这意味着图像周围有一条淡淡的彩色线条。有办法解决这个问题吗？我以为我可以同时缩放彩色div，但它最终会缩放。

<head>

<style>

.images-container{
position: relative;
width: 175px;
height: 175px;
margin-top: -191px;
}
.images-container > img{
display: block;
width: 175px;
height: 175px;
position: absolute;
-webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
     -o-transition: all 1s ease;
        transition: all 1s ease;
}

.images-container > img:nth-child(1){ 
filter: alpha(opacity=100); 
opacity: 1;
z-index: 0;
}
.images-container > img:nth-child(2){ 
filter: alpha(opacity=0); 
opacity: 0;
z-index: 1;
}
.images-container:hover > img:nth-child(1){ 
filter: alpha(opacity=0);
opacity: 0;
z-index: 0;
border-radius:50%
}
.images-container:hover > img:nth-child(2){ 
filter: alpha(opacity=100);
opacity: 1;
z-index: 3;
border-radius:50%;

}
.textbg{
background: #007049;
    position: relative;
width: 175px;
height: 175px;
 transition:all 1s;
-webkit-transition:all 1s;
-moz-transition:all 1s;

}
.textbg:hover {
border-radius:50%;
}
.imgtransition{
 transition:all 1s;
-webkit-transition:all 1s;
-moz-transition:all 1s;
margin-top:-191;
}
.textalign {
    color:#fff;
    line-height: 175px;
    text-align:center;
}
</style>
<title></title>
</head>
<body>
<div class="textbg">
    <p class="textalign">Family</p>
    <div class="images-container"><img class="imgtransition" src=
    "https://upload.wikimedia.org/wikipedia/commons/2/20/16x16.png">
    <img class="imgtransition" src=
    "http://image1.masterfile.com/em_t/06/50/52/623-06505245er.jpg"></div>
</div>
</body>
</html>

example in jsfiddle

Answer 1

您可以在textbg hover上添加透明背景

示例：

   .textbg:hover {
    border-radius:50%;
        background:transparent;
    }

希望它有效。

CSS转换同时具有图像交换和边界半径的问题

1 个答案: