css - 使用 CSS 响应图像翻转

Question

我试图在一堆响应式图像博客帖子上创建翻转效果，提示用户单击图像。目前我有两个问题

1) 我不知道如何让橙色框区域只覆盖图像的宽度(记住这个图像的宽度和高度不是固定尺寸)

2) 我不知道如何让“阅读更多”文本恰好位于橙色框的中间(再次记住这个框不是固定高度或宽度)

目前看起来像这样:

HTML

    <div class="post">
            <div class="view thumbnail">
                <img src="http://static.designspiration.net/data/l/4912616924_FIyt0Hpa_l.jpg">
                <div class="mask"> 
                    <a href="#" class="info">Read More</a>  
                </div>
            </div>

        <div class="wrap">
            <h1><a href="#">The Gent</a></h1>
            <p>Some great work from this year's LFA Futures competitions winners have been announced: Gerwyn Davies, Oliver Haupt...</p>
            <b class="time-ago">2 Months Ago</b>
            <b class="date">11.11.13</b>
        </div>
    </div>

SASS

.post {
 width: 100%;
 margin: 2%;
 display: inline-block;

.thumbnail {
    .mask {
        position: absolute;
        width: 100%;
        height: auto;
        opacity: 0;
        overflow: visible;
        background: rgba(255, 133, 66, 0.8);
        @include transition-property(all);
        @include transition-duration(0.3s);
        @include transition-timing-function(linear);
        z-index: 999999;
    }

    a.info {
        position: relative;
        opacity: 0;
        top: 85px;
        @include transition-property(all);
        @include transition-duration(0.3s);
        @include transition-timing-function(linear);
    }

    &:hover {
        .mask {
            height: 100%;
            opacity: 1;
            background: rgba(255, 133, 66, 0.8);
            z-index: 999999;
        }
        a.info {
            opacity: 1;
            @include transition-property(all);
            @include transition-duration(0.3s);
            @include transition-timing-function(linear);
            }
        }
    }

Answer 1

你好，我不知道 SASS，但我用 CSS 为你创建了这个演示:

http://jsfiddle.net/2kfUr/2/

我在这里做了额外的修改:

• 首先让thumbnail成为 mask 绝对位置的相对父级:

  .thumbnail {
    position:relative;
  }
  

• 然后让 mask 位于顶部并水平对齐文本:

  .thumbnail .mask {
    position: absolute;
    left:0;
    top:0;
    text-align:center;
  }
  

• 对于垂直对齐使用:

  .mask a.info {
    display:inline-block;
    vertical-align:middle;
  }
  .mask:before {
    display:inline-block;
    height:100%;
    content:" ";
    vertical-align:middle;    
  }
  

编辑

• 添加inline-block让容器占用img的宽度:

  .thumbnail {
    display:inline-block;
  }
  

新演示 http://jsfiddle.net/2kfUr/4/