JSFiddle - React, Tailwind, and code Playground

by anay1231

HTML

<section id="text-48" class="widget widget_text">
    <div class="widget-wrap">
        <h4 class="widget-title widgettitle">Meet Your New Social Advertising Team</h4>
        <div class="textwidget">
            <div id="image_1" class="item">
                <a><br><img src="https://www.advertisemint.com/wp-content/uploads/2016/11/accountant-finall.png" ></a>
            </div>
            <div id="image_2" class="item">
                <a><br><img src="https://www.advertisemint.com/wp-content/uploads/2016/11/copywriter-finall.png" ><br></a>
            </div>
            <div id="image_3" class="item">
                <a><br><img src="https://www.advertisemint.com/wp-content/uploads/2016/11/video-editor-finall.png" ></a>
            </div>
            <div id="image_4" class="item">
                <a><br><img src="https://www.advertisemint.com/wp-content/uploads/2016/11/designer-finall.png" ></a>
            </div>
            <div id="image_5" class="item">
                <a><br><img src="https://www.advertisemint.com/wp-content/uploads/2016/11/analyst-finall.png" ></a>
            </div>
            <div id="text">
                <div id="text_1" class="content-box">
                    <h4>Account Manager</h4>
                    <p>Your account manager is your main point of contact at AdvertiseMint. They are experts in Facebook advertising and will oversee all aspects of your campaign including account management, creating and targeting ads and leading your team.
                    </p>
                </div>
                <div id="text_2" class="content-box">
                    <h4>Copywriter</h4>
                    <p>The best social adverting involves a conversation and our copywriters are skilled in the art of writing copy that will attract, connect and engage with people that are likely to be interested in your product or service.
                    </p>
                </div>
                <div id="text_3" class="content-box">
            ...

CSS

.widget_text{background: #365993;padding: 15px 15px;}
h4{font-size: 24px;color: #fff; text-align: center;margin: 0;}
.textwidget{
    margin: 0 auto;
    text-align: center;
}
.textwidget .item{
    width: 15%;
    margin: 0 2%;
    display: inline-block;
}
.textwidget .item img{
    max-width: 100%;
    height: auto;
    cursor: pointer;
}
.content-box{
    display: none;
}
#text_1.content-box{
    display: block;
}

JavaScript

jQuery('#image_1').hover(function() {
  jQuery('#text_1').show();
}, function() {
  jQuery('#text_1').show();
});
jQuery('#image_2').hover(function() {
  jQuery('#text_2').show();
  jQuery('#text_1').hide();
}, function() {
  jQuery('#text_2').hide();
  jQuery('#text_1').show();
});
jQuery('#image_3').hover(function() {
  jQuery('#text_3').show();
  jQuery('#text_1').hide();
}, function() {
  jQuery('#text_3').hide();
  jQuery('#text_1').show();
});
jQuery('#image_4').hover(function() {
  jQuery('#text_4').show();
  jQuery('#text_1').hide();
}, function() {
  jQuery('#text_4').hide();
  jQuery('#text_1').show();
});
jQuery('#image_5').hover(function() {
  jQuery('#text_5').show();
  jQuery('#text_1').hide();
}, function() {
  jQuery('#text_5').hide();
  jQuery('#text_1').show();
});