Hover Effects images/Captions etc

HTML

<div class="figure effect-1">
    <img src="https://placekitten.com/420/320?image=2

" alt="img12" />
    <div class="figcaption">
        <div>
             <h2>Потенциальные клиенты, которые сами обратились на входящую линию объединённой компании, либо заполнили форму обратной связи на сайте компании «СПСР-ЭКСПРЕСС»</h2>

            <p>Lily likes to play with crayons and pencils</p>
        </div> 

    </div>
</div>
<!-- EFFECT 2 -->
<div class="figure effect-2">
    <img src="https://placekitten.com/400/200" alt="img12" />
    <div class="figcaption">
        <div>
             <h2>Effect 2 <span>Sadie</span></h2>

            <p>Sadie likes to play with crayons and pencils</p>
        </div> 

    </div>
</div>
<!-- EFFECT 3 -->
<div class="figure effect-3">
    <img src="https://placekitten.com/400/200" alt="img12" />
    <div class="figcaption">
        <div>
             <h2>Effect 3 <span>Roxy</span></h2>

            <p>Roxy never took.</p>
        </div> 

    </div>
</div>
<!-- EFFECT 4-->
<div class="figure effect-4">
    <img src="https://placekitten.com/400/200" alt="img12" />
    <div class="figcaption">
        <div>
             <h2>Effect 4 <span>Bubba</span></h2>

            <p>Bubba likes to appear out</p>
        </div> 

    </div>
</div>
<!-- EFFECT 5-->
<div class="figure effect-5">
    <img src="https://placekitten.com/400/200" alt="img12" />
    <div class="figcaption">
        <div>
            <h2>Effect 5 <span>Romeo</span></h2>

            <p>Romeo never knows what he wants.</p> 

        </div>
    </div>
</div>
<!-- EFFECT 6-->
<div class="figure effect-6">
    <img src="https://placekitten.com/400/200" alt="img12" />
    <div class="figcaption">
        <div>
            <h2>Effect 6 <span>Layla</span></h2>

            <p>Layla never knows what he wants.</p> 

        </div>
    </div>
</div>
<!-- EFFECT 7-->
<div class="figure effect-7">
    <img src="https://placekitten.com/400/200" alt="img12" />
    <div...

CSS

body{
    background:#333;
}/* Common style */
 .figure {
    position: relative;
    float: left;
    overflow: hidden;
    margin: 18px 18px;
    width: 420px;
    height: 220px;
    width: 33%;
    background: #3085a3;
    text-align: center;
    cursor: pointer;
    /* border:2px grey solid; */
}
.figure img {
    position: relative;
    display: block;
    opacity: 0.8;
    /* border:2px green solid; */
    width:100%;
    height:100%;
}
.figure .figcaption {
    /* padding:20px; */
    color:#fff;
    /* border:2px red solid; */
    text-transform: uppercase;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.figure .figcaption::before, .figure .figcaption::after {
    pointer-events: none;
}
.figure .figcaption, .figure .figcaption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
    /* border:1px solid blue; */
}
/* Anchor will cover the whole item by default */

/* For some effects it will show as a button */
 .figure .figcaption > a {
    z-index: 1000;
    text-indent: 10%;
    white-space: nowrap;
    font-size: 0;
    opacity: 0;
}
.figure h2 {
    /* word-spacing: -0.15em; */
    font-weight: 300;
    /* border:1px solid blue; */
}
.figure h2 span {
    font-weight: 800;
}
.figure h2, .grid .figure p {
    margin: 0;
}
.figure p {
    letter-spacing: 1px;
    font-size: 68.5%;
}
/* Individual effects */

/*---------------*/

/* ============================= 1  ============================= */

/*---------------*/
 .figure.effect-1 img {
    max-width: none;
    width: -webkit-calc(100% + 50px);
    width: calc(100% + 50px);
    opacity: 0.7;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-40px, 0, 0);
    transform: translate3d(-40px, 0, 0);
}
.figure.effect-1 .figcaption {
    text-align: left;
}
.figure.effect-1 .figcaption > div {
    position: absolute;
    bottom: 0;
    left: 0;
 ...