JSFiddle - React, Tailwind, and code Playground

by anay1231

HTML

<section class="deliver-section">
    <div class="container">
        <div class="deliver-wrap">
        <div class="deliver-block web-mobile">
            <div class="block-blue">
            <div class="web-app">
                <h3 class="fz-30">ECOMMERCE CMS</h3>
                <p>Let us build your online business platform with your favourite e-commerce CMS</p>
            </div>
            <span class="link-open">Explore</span>
            </div>
            <div class="deliver-img web-img">
            <div class="thum-img">
                <img src="/dev/wp-content/themes/bay20/images/ecommercecms-thum.jpg" alt="ECOMMERCE CMS" title="ECOMMERCE CMS">
            </div>
            <div class="services-overlay">
                <span class="close-cross">&nbsp;</span>
                <div class="services-point child-wrap">
                <ul class="services-pointer grey-effect">
                <li><a href="#">Magento</a></li>
                    <li><a href="#">Shopware</a></li>
                    <li><a href="#">PrestaShop</a></li>
                </ul>
                </div>
            </div>
            </div>
        </div>

        <div class="deliver-block">
            <div class="deliver-img web-img-large">
            <div class="thum-img">
                <img  src="/dev/wp-content/themes/bay20/images/cms-thum.jpg" alt="ECOMMERCE CMS" title="ECOMMERCE CMS">
            </div>
            <div class="services-overlay">
                <span class="close-cross">&nbsp;</span>
                <div class="services-point child-wrap">
                <ul class="services-pointer grey-effect">
                    <li><a href="#">Magento2 Development</a></li>
                    <li><a href="#">Magento Cloud Development</a></li>
                </ul>
                </div>
            </div>
            </div>
            <div class="deliver-content">
            <h3 class="fz-30">Magento Services</h3>
            <p>Let us build your online business...

CSS

.deliver-section{
    padding:50px 0 20px 0;
    position:relative;
}
.deliver-section .deliver-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    overflow: visible;
    position: relative;
    z-index: 1;
}
.deliver-section .deliver-block {
    flex: 0 0 31.852%;
    margin: 0 0 32px;
    position: relative;
    overflow: hidden;
}
.deliver-section .deliver-block.web-mobile {
    flex: 0 0 65.93%;
}
.deliver-section .web-mobile {
    display: flex;
    flex-direction: row;
}
.deliver-section .deliver-img {
    height: 300px;
    margin-bottom: 0;
    order: 2;
    overflow: hidden;
    position: relative;
    background: #ccc;
}
.deliver-section .deliver-img .thum-img{
    height: 100%;
}
.deliver-section .deliver-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .5s ease 0s;
}
.deliver-section .services-overlay {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: inherit;
    position: absolute;
    z-index: 9;
    left: -100%;
    top: 0;
    padding: 36px 15px 30px 30px;
    background-color: rgba(20,21,27,.98);
    transition: all .2s linear;
}
.deliver-section .services-overlay.current {
    left: 0;
}
.deliver-section .close-cross {
    position: absolute;
    cursor: pointer;
    width: 24px;
    height: 24px;
    right: 10px;
    top: 10px;
    z-index: 1;
    display: inline-block;
}
.deliver-section .close-cross::after, .deliver-section .close-cross::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background: #fff;
}
.deliver-section .close-cross::before {
    left: 0;
    transform: rotate(47deg);
    top: 10px;
}
.deliver-section .close-cross::after {
    left: 0;
    transform: rotate(132deg);
    top: 10px;
}
.deliver-section .link-open {
    font-size: 16px;
    cursor: pointer;
    position: relative;
    padding: 14px 30px;
    display: inline-block;
    border: 2px solid #f04b00;
    color:...

JavaScript

$(document).ready(function() {
		$(".link-open").click(function() {
			$(".services-overlay").removeClass("current");
			let e = $(this).parents(".deliver-block").index();
			$(".deliver-block").eq(e).find(".services-overlay").addClass("current");
		});
	  
		$(".close-cross").click(function() {
			$(".services-overlay").removeClass("current")
		});
	});