zui/src/less/views/cards.caption.less

一个基于 Bootstrap 深度定制开源前端实践方案，帮助你快速构建现代跨屏应用。

/// ========================================================================
/// ZUI: cards.caption.less
/// http://openzui.com
/// ========================================================================
/// Copyright 2014-2020 cnezsoft.com; Licensed MIT
/// ========================================================================


// Caption style for cards view

.card {
  > .caption {
    display: block;
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    background-color: #666;
    background-color: rgba(0,0,0,0.7);
    color: #fff;
    overflow: hidden;
    padding: 5px 10px;
    text-align: center;
    .transition(all, @animation-speed-slow, @animation-type);
    .opacity(0);
  }

  &:hover {
    > .caption {
      top: 0;
      .opacity(1);
    }
  }
}