Question

我再来这里是为了寻求帮助。

目前我有这个：http://bmxatvman.com/stuff/staffHover/

我试图让166x166尺寸的图像正确贴合。与此处的CodePen版本类似：http://codepen.io/bmxatvman14/pen/GbDvB

Exerpt：

    #admin{position:relative;
  display:inline-block;margin: 10px;}
#parent{
  width:170px;
  height:146px;
  background:transparent;
  border:10px solid rgba(255,255,255,0.7);
  position:relative;
  box-shadow: 0 0 2px rgba(0,0,0,0.4);
  z-index:5;
}
#parent+.admin{
  position:relative;
  z-index:3;
  top:-100px;
}
#parent #child{
  width:170px;
  height:146px;
  background:rgba(255,255,255,0.7);
  transform:scale(0.2);z-index:5;
  -webkit-transform:scale(0.2);
  opacity:0;
  transition:ease 0.5s;
}
#parent:hover #child{
  transform:scale(1);
  -webkit-transform:scale(1);
  opacity:1;
}
#parent a{
  background:cyan;
  width:80px;
  height:10px;
  padding:10px 0;
  display:block;
  font:9px roboto condensed;
  text-transform:uppercase;
  color:#fff;
  text-align:center;
  letter-spacing:1px;
  text-decoration:none;
  position:relative;
  left:110px;
  bottom:25px;
}
#parent a:before{
    content:"";
    width: 0;
height: 0;
border-style: solid;
border-width: 0 20px 20px 0;
border-color: transparent cyan transparent transparent;
position:absolute;
  left:-15px;
  top:0px;
}
#parent a:after{
    content:"";
    width: 0;
height: 0;
border-style: solid;
border-width: 0 0 20px 20px;
border-color: transparent transparent cyan transparent;
position:absolute;
  left:-15px;
  bottom:0px;
}

#parent sha:after{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    right: -20px;
    cabottom:55px;
    border-width: 5px 5px;
    border-style: solid;
    border-color: transparent transparent #5d0000 #5d0000;
}
per{
  display:block;
    -webkit-transform: rotateY(160deg);
    transform: rotateY(160deg);
  position:relative;left:100px;z-index:2;
  transition:ease-in-out 0.9s;
  opacity:0;
}
#parent:hover per{
  left:0px;
  transition-delay:0.3s;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  opacity:1;
}
#child{text-align:center}
.name{
  font:20px roboto condensed;
  display:block;
  color:cyan;
}
.subtitle{
  font:10px roboto condensed;
  opacity:1;
  text-transform:uppercase;
}

如果有人可以帮助我，那就太棒了。我在使用新尺寸时遇到了麻烦。如果这更容易，请随意分叉/编辑Codepen版本。

非常感谢！

Answer 1

请检查： http://codepen.io/anon/pen/eutzj 。

HTML：

<div id="admintwo">

    <div id="parent">
        <div id="child">
            <span class="name">Jeeringsole</span><span class="subtitle">Lorem Ipsum</span>
        </div>
        <per>
            <a href="http://evlhost.com">Website</a><sha></sha>
        </per>
    </div>

    <img src="http://placehold.it/166x166" class="admin"/>

</div>

CSS：

#admintwo{position:relative;
  display:inline-block;margin: 10px; vertical-align: top;}
#admintwo #parent{
  width:146px;
  height:146px;
  background:transparent;
  border:10px solid rgba(255,255,255,0.7);
  position:relative;
  box-shadow: 0 0 2px rgba(0,0,0,0.4);
  z-index:5;
}
#admintwo #parent+.admin{
  position:relative;
  z-index:3;
  top:-166px;
}
#admintwo #parent #child{
  width:146px;
  height:146px;
  background:rgba(255,255,255,0.7);
  transform:scale(0.2);z-index:5;
  -webkit-transform:scale(0.2);
  opacity:0;
  transition:ease 0.5s;
}
#admintwo #parent:hover #child{
  transform:scale(1);
  -webkit-transform:scale(1);
  opacity:1;
}
#admintwo #parent a{
  background:cyan;
  width:80px;
  height:10px;
  padding:10px 0;
  display:block;
  font:9px roboto condensed;
  text-transform:uppercase;
  color:#fff;
  text-align:center;
  letter-spacing:1px;
  text-decoration:none;
  position:relative;
  left:86px;
  bottom:25px;
}
#admintwo #parent a:before{
    content:"";
    width: 0;
height: 0;
border-style: solid;
border-width: 0 20px 20px 0;
border-color: transparent cyan transparent transparent;
position:absolute;
  left:-15px;
  top:0px;
}
#admintwo #parent a:after{
    content:"";
    width: 0;
height: 0;
border-style: solid;
border-width: 0 0 20px 20px;
border-color: transparent transparent cyan transparent;
position:absolute;
  left:-15px;
  bottom:0px;
}

#admintwo #parent sha:after{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    right: -20px;
  bottom:55px;
    border-width: 5px 5px;
    border-style: solid;
    border-color: transparent transparent #5d0000 #5d0000;
}
#admintwo per{
  display:block;
    -webkit-transform: rotateY(160deg);
    transform: rotateY(160deg);
  position:relative;left:100px;z-index:2;
  transition:ease-in-out 0.9s;
  opacity:0;
}
#admintwo #parent:hover per{
  left:0px;
  transition-delay:0.3s;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  opacity:1;
}
#admintwo #child{text-align:center}
#admintwo .name{
  font:20px roboto condensed;
  display:block;
  color:cyan;
}
#admintwo .subtitle{
  font:10px roboto condensed;
  opacity:1;
  text-transform:uppercase;
}

CSS悬停特定大小

1 个答案: