JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>

<div class="col-5 col-sm-2 ml-auto aboutMid aboutMid1">
                            <figure class="cap-left">
                                <img src="http://www.classichits.ie/wp-content/uploads/2016/12/house.png" class="img-fluid">
                                <figcaption>
                                    The house is a converted farm building featuring traditional wooden shutters and terracotta toof tiles
                                </figcaption>
                            </figure>
                        </div>
                        
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn...

CSS

figure { 
    display: block; 
    position: relative; 
    overflow: hidden; 
}

figcaption { 
    position: absolute; 
    background: rgba(0,0,0,0.75); 
    color: white; 
    padding: 10px 20px; 

    opacity: 0;
    bottom: 0; 
    left: -30%;
    -webkit-transition: all 0.6s ease;
    -moz-transition:    all 0.6s ease;
    -o-transition:      all 0.6s ease;
}

figure:hover figcaption {
    opacity: 0.9;
    left: 0;
    font-size: 1em;
}

figure:before { 
    content: "?"; 
    position: absolute; 
    background: rgba(255,255,255,0.75); 
    color: black;
    width: 24px;
    height: 24px;
    -webkit-border-radius: 12px;
    -moz-border-radius:    12px;
    border-radius:         12px;
    text-align: center;
    font-size: 12px;
    line-height: 24px;
    /* Only Fx 4 supporting transitions on psuedo elements so far... */
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    opacity: 0.75;  
}

figure:hover:before {
    opacity: 0;
}

.cap-left figcaption { bottom: 0; left: -30%; }
.cap-left:hover figcaption { left: 0; }
.cap-left:before {  bottom: 10px; left: 10px; }

JavaScript

$("figure").click(function() {
  if ($(window).width() < 960) {
    $('.modal-body').html($('figcaption').text());
    $('#myModal').modal('show');
	}
});

if ($(window).width() < 960) {
	$("figcaption").css("display", "none");
}