如何添加此悬停元素的链接？

This is my code:

//////////////////////////////////////////////////////////////////
// Service box shortcode 
//////////////////////////////////////////////////////////////////

add_shortcode('vc_service_box', 'shortcode_service_box');
    function shortcode_service_box($atts, $content = null) {
        extract(shortcode_atts(array(           
            'title' => '',
            'href' => '',
            'target' => '',                 
            'icon' => '',
            'view_more' =>'false',          
            'el_class' => ''
        ), $atts));

        $str = '';


        $str .= '<div class="vc_front_widget '.$el_class.'">';  
        if($icon):
            $img = wp_get_attachment_image_src($atts['icon']);
            $str .= '<div class="shortcode_img"><img src="'.$img[0].'" alt=""></div>';
        endif;
        if($title):
            if($href){
                $str .= '<h3 class="widget-title"><a href="'.$href.'" target="'.$target.'">'.$title.'</a></h3>';
            }
            else { $str .='<h3 class="widget-title">'.$title.'</h3>';}
        endif;

        $str .= '<div class="content_box_text">'.do_shortcode($content).'</div>';

        if($view_more=='true') {
            $str .= '<div class="view_more"><a href="'.$href.'">'. __( 'View More', 'Creativo' ) . ' &rarr;</a></div>';
        }
        $str .= '</div>';

        return $str;
    }   

So here is the .php code for the class which i am trying to add a link to. I just want to turn the background hover into a link that directs to the appropriate section.

here is the website: tandc.puerteaspecialists.co.uk

the area is under the title of "OUR SERVICES". I don't know if the code I have provided is just PHP formed CSS. there are four elements and each one requires a different href link.