使用 Bootstrap/CSS 的 Fadein/Fadeup 效果在图像上的按钮

Question

我正在尝试重新创建此网站外观作为练习：http://riotdesign.eu/en/

当将鼠标悬停在容器中的图像上时，我很难产生按钮淡入/淡出效果。我尝试添加

这是我为中间三个（关于、投资组合、联系人）部分的代码：

*注意，除了引导程序之外，我还使用了一些嵌入式 ruby​​。

<div class="row index-row">


      <div class="col-sm-4 index-left">
        <div class="media-background">

          <div class="row index-row">
          <div class="media col-sm-5">
            <a class="pull-left" href="">
              <%= image_tag('computer.jpg', class: 'media-img', alt: 'About') %>
            </a>
          </div>
            <div class="media-body col-sm-7">
              <h4>
                <%= link_to 'About', root_path, class: 'media-heading' %>
              </h4>
            <p class="heading-text">
              "ABOUT What is Riot Design, our our clients and our specialties."
            </p>
            </div>
          </div>

        </div>
      </div>




      <div class="col-sm-4 index-middle">
        <div class="media-background">

          <div class="row index-row">
          <div class="media col-sm-5">
            <a class="pull-left" href="">
              <%= image_tag('notebook.jpg', class: 'media-object', alt: 'Portfolio') %>
            </a>
          </div>
            <div class="media-body col-sm-7">
              <h4>
                <%= link_to 'Portfolio', root_path, class: 'media-heading' %>
              </h4>
            <p class="heading-text">
               PORTFOLIO Web design, app design, print works and photography.
            </p>
            </div>
          </div>

        </div>
      </div>


      <div class="col-sm-4 index-right">
        <div class="media-background">

         <div class="row index-row">
          <div class="media col-sm-5">
            <a class="pull-left" href="">
              <%= image_tag('building.jpg', class: 'media-object', alt: 'Contacts', type: 'button') %>
            </a>
          </div>
            <div class="media-body col-sm-7">
              <h4>
                <%= link_to 'Contacts', root_path, class: 'media-heading' %>
              </h4>
            <p class="heading-text">
              Where to find the 
              <strong>Creatives</strong> 
              contact module and more.
            </p>
            </div>
          </div>

        </div>
      </div>



    </div>

我尝试添加类似这样的内容：

<div class="image-overlay">
  <a class="btn btn-default animated fadeInUp needsclick", href="#">Open</a>
</div>

然后添加一些我读过但无法弄清楚的自定义 CSS。该按钮仅显示在图像上方而不是在其顶部，并且不像示例网站中那样淡入/淡出。关于我可以做些什么来产生这种效果的任何想法？

Answer 1

Demo

基本使用

transform

transition-timing-function

transition-duration

transition

及其相关的跨浏览器属性 -webkit-transform-webkit-transition-timing-function-webkit-transition-duration-moz-transform-moz-transition-timing-function-moz-transition-duration-webkit-transition等

更多信息transform transition

你的css实现同样的效果

.media-img .img-overlay {
    background: #363635;
    background: rgba(0,0,0, 0.4);
    position: absolute;
    width: 100%;
    height: 100%;
    padding-top: 50%;
    text-align: center;
    z-index: 4;
    -webkit-transition: opacity 0.3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
    -moz-transition: opacity 0.3s ease-out;  /* Firefox 4-15 */
    -o-transition: opacity 0.3s ease-out;  /* Opera 10.50–12.00 */
    transition: opacity 0.3s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
    opacity: 0;
    visibility: hidden;
}

.lt-ie9 .media-img .img-overlay {
    filter: alpha(opacity=70);
}

.media .img-overlay a {
    display: none;
    position: relative;
    margin-top: -24px;
}


.media:hover .img-overlay,
.media .media-img:hover .img-overlay {
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity 0.3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
    -moz-transition: opacity 0.3s ease-out;  /* Firefox 4-15 */
    -o-transition: opacity 0.3s ease-out;  /* Opera 10.50–12.00 */
    transition: opacity 0.3s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}


.media div.media-img img {
    -webkit-transform: scale(1, 1);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 2000ms;
    -moz-transform: scale(1, 1);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 2000ms;
    transform: scale(1, 1);
    transition-timing-function: ease-out;
    transition-duration: 2000ms;
    width: 100%;
    height: auto;
}

.media:hover div.media-img img {
    -webkit-transform: scale(1.15, 1.15);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 1500ms;
    -moz-transform: scale(1.15, 1.15);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 1500ms;
    transform: scale(1.15, 1.15);
    transition-timing-function: ease-out;
    transition-duration: 1500ms;
    position: relative;
    z-index: 3;
}


.btn {
    background: transparent;
    -webkit-transition: all 0.2s ease-out;  /* Chrome 1-25, Safari 3.2+ */
    -moz-transition: all 0.1s ease-out;  /* Firefox 4-15 */
    -o-transition: all 0.1s ease-out;  /* Opera 10.50–12.00 */
    transition: all 0.1s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}

.btn:hover {
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
    color: #424b51;
    background: #fff;
    border-color: #fff;
}

其中一些用于覆盖按钮的默认引导样式。