html - 特定尺寸的 CSS Hover

Question

为了寻求帮助，我又来了。

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

我正在尝试让 166x166 大小的图像正确适合。喜欢这里的 CodePen 版本:http://codepen.io/bmxatvman14/pen/GbDvB

摘录:

    #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;
}

如果有人能帮助我，那就太棒了。我无法适应新尺寸。如果更容易，请随意 fork /编辑 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;
}