我需要输入一个使用html的阅读更多按钮

这是一个为我们的服务内容设计的html，我试图在每个图像下添加一个按钮，我需要帮助

  <h3 class="widget-title">Our Services</h3>
    <div class="roll-news container">
        <div class="blog-post entry" style="height: 375px;cursor:pointer" onclick="openServiceModal('air')">
            <div class="entry-thumb">
                <a rel="bookmark" title="AIR FREIGHT MANAGEMENT">
                    <img width="410" height="273" src="wp-content/uploads/2019/10/air-410x273.jpg"
                        class="attachment-rocked-medium-thumb size-rocked-medium-thumb wp-post-image"
                        alt="AIR FREIGHT MANAGEMENT"> </a>
            </div>
            <h3 class="title">
                <a style="text-transform: uppercase;" rel="bookmark">Air Freight management:</a>
            </h3>
            <div class="entry-footer">
                <p>ACSS can handle all air freight requirements as per your need.</p>
            </div>
        </div>
        <div class="blog-post entry" style="height: 375px;cursor:pointer" onclick="openServiceModal('water')">
            <div class="entry-thumb">
                <a rel="bookmark" title="OCEAN FREIGHT MANAGEMENT">
                    <img width="410" height="273"
                        src="http://www.acssdxb.com/wp-content/uploads/2021/03/ocean-410x273.jpg"
                        class="attachment-rocked-medium-thumb size-rocked-medium-thumb wp-post-image"
                        alt="OCEAN FREIGHT MANAGEMENT"> </a>
            </div>
            <h3 class="title">
                <a style="text-transform: uppercase;" rel="bookmark">OCEAN FREIGHT MANAGEMENT:</a>
            </h3>
            <div class="entry-footer">
                <p>As experts in the field, ACSS team can provide the optimal solution for all Ocean Freights anywhere around the Globe.</p>
            </div>
        </div>
        <div class="blog-post entry" style="height: 375px;cursor:pointer" onclick="openServiceModal('customs')">
            <div class="entry-thumb">
                <a rel="bookmark" title="CUSTOMS CLEARANCE">
                    <img width="410" height="273" src="wp-content/uploads/2019/10/customs2-410x273.jpg"
                        class="attachment-rocked-medium-thumb size-rocked-medium-thumb wp-post-image"
                        alt="CUSTOMS CLEARANCE"> </a>
            </div>
            <h3 class="title">
                <a style="text-transform: uppercase;" rel="bookmark">Customs clearance:</a>
            </h3>
            <div class="entry-footer">
                        <p>Extensive knowledge of customs clearance around the globe.</p>
            </div>
        </div>

我们的服务

        <div class="blog-post entry" style="height: 375px;cursor:pointer" onclick="openServiceModal('warehouse')">
            <div class="entry-thumb">
                <a rel="bookmark" title="Warehousing">
                    <img width="410" height="273" src="wp-content/uploads/2019/10/warehousing-410x273.jpg"
                        class="attachment-rocked-medium-thumb size-rocked-medium-thumb wp-post-image" alt="Warehousing">
                </a>
            </div>
            <h3 class="title">
                <a style="text-transform: uppercase;" rel="bookmark">Warehousing:</a>
            </h3>
            <div class="entry-footer">
                        <p>Our warehouses are ready to cater your needs.</p>
            </div>
        </div>
        <div class="blog-post entry" style="height: 375px;cursor:pointer" onclick="openServiceModal('land')">
            <div class="entry-thumb">
                <a rel="bookmark" title="Land Transportation">
                    <img width="410" height="273" src="wp-content/uploads/2019/10/land-410x273.jpg"
                        class="attachment-rocked-medium-thumb size-rocked-medium-thumb wp-post-image"
                        alt="Land Transportation"> </a>
            </div>
            <h3 class="title">
                <a style="text-transform: uppercase;" rel="bookmark">Land transportation:</a>
            </h3>
            <div class="entry-footer">
                <p>We are equipped with our own fleet of trucks to be at your service anywhere and anytime.</p>
            </div>
        </div>
        <div class="blog-post entry" style="height: 375px;cursor:pointer" onclick="openServiceModal('cargo')">
            <div class="entry-thumb">
                <a rel="bookmark" title="Project Cargo Management">
                    <img width="410" height="273" src="wp-content/uploads/2019/10/cargo-management-410x273.jpg"
                        class="attachment-rocked-medium-thumb size-rocked-medium-thumb wp-post-image"
                        alt="Project Cargo Management"> </a>
            </div>
            <h3 class="title">
                <a style="text-transform: uppercase;" rel="bookmark">Project Cargo Management:</a>
            </h3>
            <div class="entry-footer">
                <p>ACSS project team has been involved in many projects over the years solving the most demanding logistic
                    challenges</p>
            </div>
        </div>

<div class="blog-post entry" style="height: 375px;cursor:pointer" onclick="openServiceModal('consolidation')">
            <div class="entry-thumb">
                <a rel="bookmark" title="Consolidation">
                    <img width="410" height="273" src="wp-content/uploads/2019/10/consolidation-410x273.jpg"
                        class="attachment-rocked-medium-thumb size-rocked-medium-thumb wp-post-image" alt="Consolidation">
                </a>
            </div>
            <h3 class="title">
                <a style="text-transform: uppercase;" rel="bookmark">Consolidation:</a>
            </h3>
            <div class="entry-footer">
                <p>We are pleased to provide regular LCL Consolidation services to and from all GCC countries and other neighboring countries.</p>
            </div>
        </div>
        <div class="blog-post entry" style="height: 375px;cursor:pointer" onclick="openServiceModal('documentation')">
            <div class="entry-thumb">
                <a rel="bookmark" title="Documentation">
                    <img width="410" height="273" src="wp-content/uploads/2019/10/documentation-410x273.jpg"
                        class="attachment-rocked-medium-thumb size-rocked-medium-thumb wp-post-image" alt="Documentation">
                </a>
            </div>
            <h3 class="title">
                <a style="text-transform: uppercase;" rel="bookmark">Documentation:</a>
            </h3>
            <div class="entry-footer">
                <p>Our documentation team is ready to assist you when it comes to import / export documents.</p>
            </div>
        </div>
        <div class="blog-post entry" style="height: 375px;cursor:pointer" onclick="openServiceModal('packing')">
            <div class="entry-thumb">
                <a rel="bookmark" title="Cargo Packing / Lashing">
                    <img width="410" height="273" src="wp-content/uploads/2019/10/packing-410x273.jpg"
                        class="attachment-rocked-medium-thumb size-rocked-medium-thumb wp-post-image"
                        alt="Cargo Packing / Lashing"> </a>
            </div>
            <h3 class="title">
                <a style="text-transform: uppercase;" rel="bookmark">Cargo Packing / Lashing:</a>
            </h3>
            <div class="entry-footer">
                <p>ACSS provides Packing, Crating & Lashing solutions.</p>
            </div>
        </div>
    </div>

    <div id="serviceModal" class="service-modal">
    
        <div class="service-modal-content">
            <span class="close" onclick="closeServiceModal()">×</span>
            <div class="service-modal-layout">
                <h4 id="service-modal-layout-title"></h4>
                <img width="410" height="273" id="service-modal-layout-img" src="/assets/imgs">
                <p id="service-modal-layout-description"></p>
                            <div id="service-modal-layout-description2"></div>
            </div>
        </div>
    </div>