试图显示信息:悬停与CSS，关键帧

Question

我构建了一个显示，它以老板要求的"平铺式"外观显示信息，仅使用CSS。所以他改变了主意，想让文字滑出来，用图片说明它在哪里。这就是我现在的处境。

我想我可以浮动描述div，并使其相对于容器div的底部。这样当容器展开时，文本将向下移动。没有工作。

CSS

    /*HOW THE ROSTER LOOKS BEFORE THE HOVER*/
div.dude{    /*DUDE is the container for both the description and the photo divs*/
    background-color:#82b2cd;
    float:left;
    margin-left:50px;
    margin-bottom:20px;
    width:200px;
    height:200px;
    overflow:hidden;
    transition: all 0.3s ease-in-out;
}
div.dude>:first-child{  /*DESCRIPTION*/
    font-size:14px;
    opacity:0;
    text-align:center;
    height:200px;
    color:#ffffff;
    transition: opacity 1s linear;
}
div.dude>:first-child>h5{
      color:#ffffff;
      font-family: 'Roboto', sans-serif;
      font-size:16px;
}
div.dude > div:nth-of-type(2){  /*Roster photo 200x200*/
    position:relative;
    top:-200px; /*cover up the description*/
    float:left;
    clear:none;
    height:200px;
    width:100%;
    background-size:cover;
}
/*HOW A ROSTER ITEM LOOKS WHEN THE MOUSE HOVERS or FOCUS:*/
div.dude:hover, div.dude:focus{
    height:400px;
    box-shadow: 2px 2px 1px #888888;
}
div.dude:hover > :first-child, div.dude:focus > :first-child { 
  opacity: 1;
  transition: opacity 1s linear;
}
div.dude:hover > div:nth-of-type(2), div.dude:focus > div:nth-of-type(2){
animation:duder 1s;
-moz-animation:duder 1s; /* Firefox */
-webkit-animation:duder 1s; /* Safari and Chrome */ 
    top:0px;
}

@keyframes duder
{
0%   {top:-150px;}
25%  {top:-0px;}
50%  {top:-0px;}
75%  {top:-0px;}
100% {top:0px;}
}
 @-moz-keyframes duder /* Firefox */
{
0%   {top:-150px;}
25%  {top:-0px;}
50%  {top:-0px;}
75%  {top:-0px;}
100% {top:0px;}
}
@-webkit-keyframes duder /* Safari and Chrome */
{
0%   {top:-150px;}
25%  {top:-0px;}
50%  {top:-0px;}
75%  {top:-0px;}
100% {top:0px;}
}

HTML

<div class="bs-docs-grid">
            <div class="row">
                <div class="dude span4">
                    <div><h5>Scott Sheridan</h5></br><i>English as a Second Language</i></br>Marianapolis Preparatory School</br>Thompson, CT</div> 
                    <div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/10/ssheridan.jpg');"></div>
                </div>
                <div class="dude span4">
                    <div><h5>Mike Fauteux</h5></br><i>Academic Numeracy and Geometry</br>Master Teacher</i></br></div> 
                <div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/08/fauteux-300x300.jpg');"></div>
                </div>
                <div class="dude span4">
                    <div><h5>Rose Zapata</h5></br><i>Algebra 1 and Geometry</br>Master Teacher</i></div> 
                <div style="background-image:url('http://leadps.org/images/content/633/Zapata.jpg');"></div>
                </div>
            </div>
            <div class="row">
                <div class="dude span4">
                    <div><h5>Rudy Sharar</h5></br><i>High School Science</i></div> 
                <div style="background-image:url('http://www.leadps.org/images/content/1263/Rudy%20Sharar.jpg');"></div>
                </div>
                <div class="dude span4">
                    <div><h5>Joe Williams</h5></br><i>School Administration</i></div> 
                <div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/11/joe_williams.jpg');"></div>
                </div>
                <div class="dude span4">
                    <div><h5>Martha James</h5></br><i>High School</i></div> 
                <div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/12/martha_james.jpg');"></div>
                </div>
            </div>
            <div class="row">
                    <div class="dude span4">
                        <div><h5>Mitchell Mosbey</h5></br><i>First Grade</i></div> 
                    <div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/11/mmosbey.jpg');"></div>
                    </div>
                    <div class="dude span4">
                        <div><h5>Robert Rigonan</h5></br><i>Middle School Science</i></div> 
                    <div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/11/397136_4343580901101_1361576410_n-650x650.jpg');"></div>
                    </div>
                    <div class="dude span4">
                        <div><h5>Manny Herrera</h5></br><i>Fourth Grade</i></div> 
                    <div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/10/mannyhanging.jpg');"></div>
                    </div>
            </div>
            <div class="row">
                <div class="dude span4">
                    <div><h5>Sophia Thomas</h5></br><i>High School Mathematics</i></div> 
                <div style="background-image:url('http://www.leadps.org/images/content/1263/Sophia%20Thomas.jpg');"></div>
                </div>
                <div class="dude span4">
                    <div><h5>Mary Ellen Davies</h5></br><i>Middle School German</i></div> 
                <div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/10/Schoenes-Wochenende-Ticket.jpg');"></div>
                </div>
                <div class="dude span4">
                    <div><h5>Dan Alderson</h5></br><i>10th Grade English</i></div> 
                <div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/10/dalderson-650x650.png');"></div>
                </div>
            </div>
            <div class="row">
                <div class="dude span4">
                    <div><h5>Heather Meiring</h5></br><i>High School Science</i></div> 
                <div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/11/heather_meiring.jpg');"></div>
                </div>
                <div class="dude span4">
                    <div><h5>Ruthe Hall</h5></br><i>Middle School</i></div> 
                <div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/12/ruthe_hall.jpg');"></div>
                </div>
                <div class="dude span4">
                    <div><h5>Evan Wolkenstein</h5></br><i>Jewish Literature, Psychology, Human Relations</i></div> 
                <div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/12/evan_wolk.png');"></div>
                </div>
            </div>
            <div class="row">
                <div class="dude span4">
                    <div><h5>Sarah Gerhardt</h5></br><i>Second Grade</i></div> 
                <div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/10/Sarah_g-650x644.jpg');"></div>
                </div>
                <div class="dude span4">
                    <div><h5>Becca Abeles</h5></br><i>10th &amp; 11th Grade English</i></div> 
                <div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/10/b_abeles.jpg');"></div>
                </div>
                <div class="dude span4">
                    <div><h5>Tess O'Brien</h5></br><i>Fourth Grade</i></div> 
                <div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/10/P1010156_2.jpg');"></div>
                </div>
            </div>
            <div class="row">
                <div class="dude span4">
                    <div><h5>Jean Gephart</h5></br><i>High School Science</i></div> 
                <div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/11/JeanGephart.jpg');"></div>
                </div>
            </div>
          </div>
<!-- ROSTER ENDS -->

Answer 1

为了使描述文本在图片上滑动(而不将图片向下推)，您可以将描述放在绝对定位的div中，将其与top:-200px一起放置在父元素上方，并在父元素悬停或聚焦时设置top:0。我在这里提供了一个工作示例:http://jsfiddle.net/YXuk9/113/.

当你在这里的时候，你可以对你的代码做一些改变，这将使你更容易做你想做的事情。首先，如果可以，最好使用id和类来构建HTML，而不是使用nth-child选择器来引用它们。这将更容易阅读和维护。

<div class="profile">
    <img class="photo" src="http://exitticket.org/wp-content/uploads/2013/10/ssheridan.jpg" alt="Scott Sheridan" />
    <div class="description">
        <h5>Scott Sheridan</h5>
        <span class="subject">English as a Second Language</span>
        <span class="school">Marianapolis Preparatory School</span>
        <span class="location">Thompson, CT</span>
    </div>
</div>

注意这种构造HTML的方式如何使每个标记所包含的信息类型变得清晰。这样，当您在CSS中引用给定的标记时，您就可以清楚地知道您在谈论什么，因此您不需要注释说div的第一个子元素是描述!

那么你的CSS可以更简单:

.profile {
    position:relative;
    width:200px;
    height:200px;
    display:block;
    overflow:hidden;
    float:left;
    margin-left:50px;
    margin-bottom:20px;
}
.photo {
    width:100%;
}
.description {
    background-color:#82b2cd;
    position:absolute;
    top:-200px;
    left:0;
    color:white;
    padding:10%;
    height:100%;
    transition: all 0.3s ease-in-out;
}
.description span {
    display:block;
}
.profile:hover .description, .profile:focus .description {
    top:0;
}

注意，现在每个CSS规则引用的元素都很清楚了。为了清楚起见，我已经删除了一些与你所遇到的问题无关的样式。