SemanSemantic-UItic-UI/server/partials/examples/card.html

<div class="ui card">
  <div class="image">
    <div class="ui dimmer">
      <div class="content">
        <div class="center">
          <div class="ui inverted button">Add Friend</div>
        </div>
      </div>
    </div>
    <img src="/images/wireframe/image.png">
  </div>
  <div class="content">
    <div class="header">Title</div>
    <div class="meta">
      <a class="group">Meta</a>
    </div>
    <div class="description">One or two sentence description that may go to several lines</div>
  </div>
  <div class="extra content">
    <a class="right floated created">Arbitrary</a>
    <a class="friends">
      Arbitrary</a>
  </div>
</div>
<div class="ui card">
  <div class="content">
    <div class="header">
      <img src="/images/wireframe/square-image.png" class="ui avatar image">
      Abbreviated Header
    </div>
    <div class="description">
      Short Description
    </div>
  </div>
  <div class="ui two bottom attached buttons">
    <div class="ui button">
      Action 1
    </div>
    <div class="ui button">
      Action 2
    </div>
  </div>
</div>

<script type="text/javascript">
$(document)
  .ready(function(){
    $('.demo .card .dimmer')
      .dimmer({
        on: 'hover'
      })
    ;
  })
;
</script>