info hover

gistfile1.txt

.fa-info-circle {
      position: absolute;
      right: 0px;
      z-index: 100000
  }

  .template-description {
    background: rgba(255, 255, 255, .9);

    p {
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 14px;
      line-height: 1.5;
      max-height: 148px;
      text-align: left;
      padding-left: 2px;
    }
  }
  
.template-description p {
 opacity: 0;
 transition: $transition;
}

.fa-info-circle:hover~.template-description p {
 opacity: 1;
}

<div class="card-item template-preview">
          <i class="fa fa-info-circle"></i>
          <div class="template-description">
            <p>
              Cray farm-to-table viral, you probably haven't heard of them before
              they sold out flexitarian disrupt chambray heirloom asymmetrical
              twee Kickstarter next level gentrify YOLO. Williamsburg High Life
              PBR&B umami, Marfa tote bag distillery health goth church-key
              hoodie. Flexitarian actually put a bird on it umami.
              Austin Pinterest roof party, gastropub Bushwick swag messenger
              bag sustainable vinyl whatever. Polaroid Thundercats art party
              Bushwick iPhone quinoa. Bicycle rights cold-pressed kogi you
              probably haven't heard of them before they sold out mumblecore.
              Farm-to-table High Life typewriter fashion axe sustainable.
            </p>
          </div>

          <div class="template-actions">
            <a class="btn btn-default">
              Preview <i class="fa fa-eye"></i>
            </a>
            <a href="#" class="btn btn-default" data-toggle="modal" data-target="#create-from-template">
              Add <i class="fa fa-plus"></i>
            </a>
          </div>