FABs in Cards half invisible

[snowfrogdev]

Hi,

Only the top half of my halfway FABs are showing in my cards.

Here is the HTML:

<main class="section">
          <div class="container">
            <div class="row">
              <div class="col s6 m4 l3" *ngFor="let card of cards">
                <div class="card small">
                  <div class="card-image">
                    <img src={{card.picture}}>
                    <a class="btn-floating halfway-fab waves-effect waves-light cyan"><i class="material-icons">add</i></a>
                  </div>
                  <div class="card-content">                    
                    <div class="book-title-group">
                      <span class="book-title">{{card.title}}</span><span class="paragraph-end"></span>
                    </div>
                    <div class="book-author-group">
                      <span class="book-author">{{card.author}}</span><span class="paragraph-end"></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </main>

And the CSS

h3 {    
    margin-bottom: 0.1em;
    margin-top: 1.2rem
  }

  .book-title-group,
  .book-author-group {
    overflow: hidden;
    position: relative;
  }

  .book-title {
    font-size: 1.1em;
    white-space: nowrap;
  }

  .book-author {
    font-size: 0.9em;
    white-space: nowrap;
  }

  .paragraph-end {
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    width: 3em;
    height: 2em;
    white-space: nowrap;
    position: absolute;
    max-height: 100%;
    bottom: 0;
    right: 0;
  }