jQuery toggleClass example

Toggle class name on click in jQuery

by yourbudweiser

HTML

<div class="col-sm-6 main-feature-block">
    <div class="block-content">
        <div class="feature-image" style="background: url('https://via.placeholder.com/150')"></div>
        <div class="short-description-block">
            <div class="content">
                <h5>Lorem Ipsum</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu lacus euismod, finibus orci ut, interdum velit. Donec sit amet lorem et velit auctor commodo at non purus.</p>
                <div class="btn-content">
                  <a class="c-btn" href="#" target="_self">Learn More</a>
                </div>                                                    
                                                                
            </div>
        </div>                                     
    </div>
</div>

<div class="col-sm-6 main-feature-block">
    <div class="block-content">
        <div class="feature-image" style="background: url('https://via.placeholder.com/150')"></div>
        <div class="short-description-block">
            <div class="content">
                <h5>Lorem Ipsum</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu lacus euismod, finibus orci ut, interdum velit. Donec sit amet lorem et velit auctor commodo at non purus.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu lacus euismod, finibus orci ut, interdum velit. Donec sit amet lorem et velit auctor commodo at non purus.</p>                
                <div class="btn-content">
                  <a class="c-btn" href="#" target="_self">Learn More</a>
                </div>                                                    
                                                                
            </div>
        </div>                                     
    </div>
</div>

&nbsp;

CSS

.main-feature-block {
    margin-bottom: 12px;
    overflow: hidden;
    width: 49.5%;
}

.block-content {
    height: 100%;
    position: relative;
}

.feature-image {
    background-position: center !important;
    background-size: cover !important;
    padding: 52% 0;
    height: 100%;
}

.short-description-block {
    position: absolute;
    z-index: 1;
    margin-bottom: 0;
    background-color: rgba(93,179,193, .7);
    align-items: center;
    display: flex;
    width: 100%;
    transform: translateY(70%);
    transition: all .5s ease;
    bottom: 0;
}
.content {
    padding: 0px 35px 10px;
}

.main-feature-block .block-content:hover .short-description-block {
    transform: translateY(0%);
}