JSFiddle - React, Tailwind, and code Playground

by Stalk

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container col-lg-12 post-view">
  <div class="row">
    <div class="col-lg-6">
        <a href="#">
          <div class="guideTitleImg">
            <div class="guideImg">
              <img src="http://wdorogu.ru/wp-content/uploads/2015/10/коала-кричит.jpg">
              <h3>Новый текст</h3>
            </div>
          </div>
        </a>
    </div>
    <div class="col-lg-6">
        <a href="#">
          <div class="guideTitleImg">
            <div class="guideImg">
              <img src="http://wdorogu.ru/wp-content/uploads/2015/10/коала-кричит.jpg">
              <h3>Новый текст</h3>
            </div>
          </div>
        </a>
    </div>
    <div class="col-lg-6">
        <a href="#">
          <div class="guideTitleImg">
            <div class="guideImg">
              <img src="http://wdorogu.ru/wp-content/uploads/2015/10/коала-кричит.jpg">
              <h3>Новый текст</h3>
            </div>
          </div>
        </a>
    </div>
  </div>
</div>

CSS

.post-view a:hover{
  text-decoration: none;
}
.post-view .guideImg{
  width:350px;
  height:200px;
  margin-bottom: 17px;
  overflow: hidden;
  position: relative;
}
.post-view .guideImg h3{
    color: #ffffff;
    position: absolute;
    top: 10px;
    left: 10px;
}
.post-view .guideImg img{
  transition: all 1s ease-out;
  width:350px;
  height:100%;
}
.post-view .guideImg img:hover{
  transform: scale(1.1);
}