<br>
    <div class="container">
      <div class="row">
        <div class="col-md-4 col-sm-6 col-xs-12">
          <div class="single-card">
            <a href="#"><div class="card-icon">
              <img src="http://atmoscape.com.au/hot-links/card-icon_Personal-development.svg" alt="Personal development">
                                    <div class="card-hover">
                                        <i class="fa fa-link"></i>
                                    </div>
                               
            </div></a>
            <div class="card-content">
               <a href="#"><h3>Personal development</h3><a/>
              <h4>For you</h4>
              <h5>Tailor a learning plan that suits you</h5>
              <h4>For your team</h4>
              <h5>Address the learning needs of your team</h5>
            </div>
          </div>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
          <a href="#"><div class="single-course">
            <div class="card-icon">
              <img src="http://atmoscape.com.au/hot-links/card-icon_Support-services.svg" alt="Support services">
                                    <div class="card-hover">
                                        <i class="fa fa-link"></i>
                                    </div>
                                
            </div></a>
            <div class="card-content">
             <a href="#"><h3>Support services</h3><a/>
              <h4>Support overview</h4>
              <h5>Areas you can get assistance</h5>
              <h4>Self-help</h4>
              <h5>How the site encourages autonomy</h5>
            </div>
          </div>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
          <div class="single-card">
            <a href="#"><div class="card-icon">
              <img src="http://atmoscape.com.au/hot-links/card-icon_About-the-site.svg" alt="About the site">
                                    <div class="course-hover">
                                        <i class="fa fa-link"></i>
                                    </div>
                                
            </div></a>
            <div class="card-content">
             <a href="#"><h3>About the site</h3><a/>
              <h4>Self-managed learning</h4>
              <h5>Discover the process</h5>
              <h4>Provide feedback</h4>
              <h5>Help us improve our website</h5>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
.card-content{
    padding: 1px 20px 20px;
    text-align: left;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.3); 
}

.card-icon img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 66%;
    height: 66%;
    padding: 20px;
}

.card-icon {
    width: 100%;
    height: 100%;
	  background-color: #00b6f5;
}

.card-icon:hover {
	  background-color: #2a6496;
}

.card-content h3 {
    font-size: 22px;
    color: #333;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
}

.card-content h4 {
	  font-size: 16px;
	  color: #333;
    font-weight: 600;
	  line-height: 0.9;
    font-family: 'Open Sans', sans-serif;
    padding-top: 7px;
}

.card-content h5 {
	  color: #333;
	  line-height: 0.9;
    font-family: 'Open Sans', sans-serif;
}
Run Pen

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.