CSS Tables

<div class="display_table">
    <div class="display_tablecell">
        <img src="css/IMG_3067.jpg">
    </div>
    <div class="display_tablecell">
        <img src="css/IMG_3074.jpg">
    </div>
    <div class="display_tablecell">
        <img src="css/IMG_3010.jpg">
    </div>
    <div class="display_tablecell">
        <img src="css/IMG_2929.jpg">
    </div>
</div>

.display_table {
    display: block;
    border: 1px solid black;
    margin: 20px 0;
}
.display_tablecell {
    display: block;
    border: 1px solid black;
    vertical-align: middle;
}
.display_tablecell > img {
    max-width: 400px;
}
@media screen and (min-width: 920px) {
    .display_table {
        display: table;
        width: 100%;
        border: 1px solid black;
        margin: 20px 0;
    }
    .display_tablecell {
        display: table-cell;
        border: 1px solid black;
    }
}

<div class="gallery">
    <div class="gallery-image">
        <img src="css/IMG_3074.jpg" />
        <div class="gallery-text">
            <div>Koh Samui</div>
        </div>   
    </div>  
</div>

<div class="gallery">
    <div class="gallery-image">
        <img src="css/IMG_3074.jpg" />
        <div class="gallery-text1">
            <div>Koh Samui</div>
        </div>   
    </div>  
</div>

<div class="gallery">
    <div class="gallery-image">
        <img src="css/IMG_3074.jpg" />
        <div class="gallery-text2">
            <div>Thailand</div>
        </div>   
    </div>  
</div>

.gallery {
    max-width:300px;
    max-height:300px;
    position: relative;
    padding: 0;
    margin: 0;
    text-align: center;
    margin: 0 auto;
}
.gallery-image{
    cursor:pointer;
    position: relative;
    display: block;
}
.gallery-image img{
    max-width:300px;
    max-height:300px;
}
.gallery-text{
    position: absolute;
    top: 0; right: 0;
    bottom: 0; left: 0;
    width: 300px;
    height: 300px; 
    text-align: center;
    background-color: rgba(0,0,0,0.8);
    opacity: 0;
    -webkit-transition: opacity 0.6s;
    -moz-transition: opacity 0.6s;
    transition: opacity 0.6s;
    vertical-align: middle;
    line-height: 300px;
}
.gallery-text:hover{
    opacity: 1;      
}
.gallery-text div{
    color: white;
    display: inline-table;
    vertical-align:middle;         
}

.gallery-text1{
    position: absolute;
    top: 0; right: 0;
    bottom: 0; left: 0;
    width: 300px;
    height: 300px; 
    text-align: center;
    vertical-align: middle;
    line-height: 300px;
}
.gallery-text1 div{
    color: white;
    display: inline-table;
    vertical-align:middle;           
}

.gallery-text2{
    position: absolute;
    top: 15%; right: 15%;
    bottom: 15%; left: 15%;
    text-align: center;
    background-color: rgba(255,255,255,0.8);
    opacity: 1;
    vertical-align: middle;
    line-height: 200px;
}
.gallery-text2 div{
    color: black;
    display: inline-table;
    vertical-align:middle;           
}

<div class="banner-image banner-padding-bottom">
    <div class="outer-table-cell">
        <div class="inner-table">
            <div class="inner-tablecell">
                <img src="css/thaisquare.jpg">
                <div class="text-line">Hoodie man bun craft beer succulents</div>
                <div class="text-line">cardigan pork belly fingerstache</div>
            </div>
        </div>
    </div>
</div>

.banner-image {
    /* FOR RESPONSIVE BACKGROUND IMAGE SWAP BACKGROUND COLOR FOR IMAGE */
    background-color: linen;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 30px;
}
.banner-padding-bottom {
    padding-bottom:44%;
    position:  relative;
    height:0;
}
.outer-table-cell {
    display: table-cell;
    vertical-align:middle;
    height: 100%;
    text-align: center;
    position: absolute;
    right: 5%;
    color: #000;
}
.inner-table {
    display: table;
    height: 100%;
}
.inner-tablecell {
    display: table-cell;
    vertical-align: middle;
    border: 1px solid black;
}
.inner-tablecell img {
    margin: 0 auto;
    height: auto;
    width: 100px;
}
.text-line {
    display:none;
    font-size: 14px;
}
@media (min-width:414px) {
    .outer-table-cell {
        right: 10%;
    }
}
@media (min-width:600px) {
    .inner-tablecell img {
         width: 150px;
    }
    .outer-table-cell {
        width: 200px;
        right: 0;
    }
}
@media (min-width:768px) {
    .outer-table-cell {
        width: 300px;
        right: 5%;
    }
    .text-line {
        display:block;
    }
    .banner-padding-bottom{
        padding-bottom:36.5%; 
    } 
    .inner-tablecell img {
        margin-bottom: 15px;
    }
}

<div class="banner-padding-bottom2">
    <div class="banner-image2">
        <div class="inner-table2">
            <div class="inner-tablecell2">
                <div class="text-line">Hoodie man bun craft beer succulents</div>
            </div>
        </div>
    </div>
</div>

.banner-padding-bottom2 {
    padding-bottom: 44%;
    position:  relative;
    height:0;
}
.banner-image2 {
    position: absolute;
    background-image: url('EG3C9957.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
    top:0;
    left:0;    
}
.inner-table2 {
    display: table;
    height: 100%;
    width: 100%;
}
.inner-tablecell2 {
    display: table-cell;
    vertical-align: middle;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
}

<form class="form-table" action="mailto:someone@example.com" method="post" enctype="text/plain">
    <input class="form-name-input" type="text" name="name">
    <input class="form-email-input" type="email" name="mail" placeholder="email">
    <input class="form-comment-input" type="text" name="comment" size="50">
    <input class="form-submit" type="submit" value="Send">
    <input class="form-reset" type="reset" value="Reset">
</form>

.form-table {
    display: table;
    width: 100%;
}
.form-name-input {
    display:none;    
}
.form-email-input {
    display:table-cell;
    border:1px solid black;    
    width: 100%;
    height: 40px;
    padding: 15px;
    margin-right: 10px;
    margin-bottom: 10px;
}
input[type="email"]:hover::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: black;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}
.form-comment-input {
    display:none;     
}
.form-submit {
    display:table-cell; 
    border:1px solid black;  
    width: 100%; 
    height: 40px;
}
.form-submit:hover {
    background-color: #323232;
    color:white;
}
.form-reset {
    display:none;    
}

@media screen and (min-width: 515px) {
    .form-email-input {   
        width: 300px;
    }
    .form-submit {
        width: 100px; 
    }
}