Question

我在网页上有很多图像，每个图像都有覆盖文字。我想做的是具有一种悬停效果，其中叠加的文本从容器的底部移至中心，同时在其下方显示另一个文本框（这将是指向另一个网页的“阅读更多”链接）。我的HTML和CSS如下：除了将覆盖的文本向上移动并显示Read More按钮之外，我能够做所有事情。任何帮助将不胜感激。

HTML

    <section class="img-wrapper" style="width: 49%; ">
        <a href="cmarequest.html">
        <img src="_images/TrueMarketValue.jpg" alt="CMA">
        <div class="title">Your Homes Value
        <p class="readMore">Read More &nbsp;&nbsp;&nbsp;&#8594;</p></div>
        </a>
    </section>

CSS

.img-wrapper {
    float: left;
    display: inline-block;
    overflow: hidden;
    position: relative;
    border: 2px solid #000;
}

.img-wrapper img {
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -ms-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    vertical-align: middle;
    opacity: .8;
    filter: brightness(40%);
}

.img-wrapper img:hover {
    -webkit-transform:scale(1.2); /* Safari and Chrome */
    -moz-transform:scale(1.2); /* Firefox */
    -ms-transform:scale(1.2); /* IE 9 */
    -o-transform:scale(1.2); /* Opera */
    transform:scale(1.2);
}

.img-wrapper .title {
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;

    position: absolute;
    bottom: 1em;
    text-align: center;
    width: 100%;
    z-index: 1;  
    color: #FFF;
    font-size: 1.5em;
}

.readMore {
    position: absolute;
    color: #FFF;
    padding: 2em 2em 2em 1em;
    display: none;
    cursor: pointer;
}

.readMore {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.readMore:hover {
    background-color: #DDD;
    color: #000;
    display: inline-block;
}

将文字移到图片上方并显示其他文字

0 个答案: