Question

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

1）我无法弄清楚如何让橙色框区域仅覆盖图像的宽度（请记住此图像宽度和高度不是固定尺寸）

2）我不知道如何让“阅读更多”文字正好位于橙色框的中间（再次记住，此框不是固定高度或宽度）

目前看起来像这样：

enter image description here

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成为面具绝对位置的相对父级：
```
.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/

使用CSS响应图像翻转

1 个答案: