<div class="container">
  <div class="row">
    <div class="col-md-12 color-configurator">
      <div class="row">
        <div class="col-md-12">

          <div class="color-picker-row">

            <div id="front" class="column-picker main-car">
              <div role="tabpanel" id="colors-μπροστά όψη-imgtab-1" aria-hidden="false" class="tabColor color-tab1 active" style="display: block; opacity: 1;">
                <div class="nobg"><img src="https://www.citroen.gr/wp-content/uploads/2014/05/nouvelle-C1-blanclipizan.jpg" data-src="https://www.citroen.gr/wp-content/uploads/2014/05/nouvelle-C1-blanclipizan.jpg" alt=" C1" class="responsive-images lazyloaded"></div>
              </div>
              <div role="tabpanel" id="colors-μπροστά όψη-imgtab-2" aria-hidden="true" class="tabColor color-tab2" style="display: none; opacity: 0;">
                <div class="nobg"><img src="https://www.citroen.gr/wp-content/uploads/2014/05/nouvelle-C1-rougescarlet.jpg" data-src="https://www.citroen.gr/wp-content/uploads/2014/05/nouvelle-C1-rougescarlet.jpg" alt=" C1" class="responsive-images lazyloaded"></div>
              </div>
              <div role="tabpanel" id="colors-μπροστά όψη-imgtab-3" aria-hidden="true" class="tabColor color-tab3" style="display: none; opacity: 0;">
                <div class="nobg"><img src="https://www.citroen.gr/wp-content/uploads/2014/05/nouvelle-C1-noircaldera.jpg" data-src="https://www.citroen.gr/wp-content/uploads/2014/05/nouvelle-C1-noircaldera.jpg" alt=" C1" class="responsive-images lazyloaded"></div>
              </div>
              <div role="tabpanel" id="colors-μπροστά όψη-imgtab-4" aria-hidden="true" class="tabColor color-tab4" style="display: none; opacity: 0;">
                <div class="nobg"><img src="https://www.citroen.gr/wp-content/uploads/2014/05/nouvelle-C1-griscarlinite.jpg" data-src="https://www.citroen.gr/wp-content/uploads/2014/05/nouvelle-C1-griscarlinite.jpg" alt=" C1" class="responsive-images lazyloaded"></div>
              </div>
              <div role="tabpanel" id="colors-μπροστά όψη-imgtab-5" aria-hidden="true" class="tabColor color-tab5" style="display: none; opacity: 0;">
                <div class="nobg"><img src="https://www.citroen.gr/wp-content/uploads/2014/05/nouvelle-C1-grisgallium.jpg" data-src="https://www.citroen.gr/wp-content/uploads/2014/05/nouvelle-C1-grisgallium.jpg" alt=" C1" class="responsive-images lazyloaded"></div>
              </div>
              <div role="tabpanel" id="colors-μπροστά όψη-imgtab-6" aria-hidden="true" class="tabColor color-tab6" style="display: none; opacity: 0;">
                <div class="nobg"><img src="https://www.citroen.gr/wp-content/uploads/2018/02/ultra_emerald_front-2.jpg" data-src="https://www.citroen.gr/wp-content/uploads/2018/02/ultra_emerald_front-2.jpg" alt=" C1" class="responsive-images lazyloaded"></div>
              </div>
              <div role="tabpanel" id="colors-μπροστά όψη-imgtab-7" aria-hidden="true" class="tabColor color-tab7" style="display: none; opacity: 0;">
                <div class="nobg"><img src="https://www.citroen.gr/wp-content/uploads/2018/02/calvi_front.jpg" data-src="https://www.citroen.gr/wp-content/uploads/2018/02/calvi_front.jpg" alt=" C1" class="responsive-images lazyloaded"></div>
              </div>
              <div role="tabpanel" id="colors-μπροστά όψη-imgtab-8" aria-hidden="true" class="tabColor color-tab8" style="display: none; opacity: 0;">
                <div class="nobg"><img src="https://www.citroen.gr/wp-content/uploads/2018/02/nude-front.jpg" data-src="https://www.citroen.gr/wp-content/uploads/2018/02/nude-front.jpg" alt=" C1" class="responsive-images lazyloaded"></div>
              </div>
            </div>
            <!--front-car-->

            <div style="display:none;opacity:0" id="back" class="column-picker main-car">
              <div role="tabpanel" id="colors-πίσω όψη-imgtab-1" aria-hidden="false" class="tabColor color-tab1 active" style="display: block; opacity: 1;">
                <div class="nobg"><img src="https://www.citroen.gr/wp-content/uploads/2014/05/nouvelle-C1-blanclipizan-rear.jpg" data-src="https://www.citroen.gr/wp-content/uploads/2014/05/nouvelle-C1-blanclipizan-rear.jpg" alt=" C1" class="responsive-images lazyloaded"></div>
              </div>
              <div role="tabpanel" id="colors-πίσω όψη-imgtab-2" aria-hidden="true" class="tabColor color-tab2" style="display: none; opacity: 1;">
                <div class="nobg"><img src="https://www.citroen.gr/wp-content/uploads/2014/05/nouvelle-C1-rougescarlet-rear.jpg" data-src="https://www.citroen.gr/wp-content/uploads/2014/05/nouvelle-C1-rougescarlet-rear.jpg" alt=" C1" class="responsive-images lazyloaded"></div>
              </div>
              <div role="tabpanel" id="colors-πίσω όψη-imgtab-3" aria-hidden="true" class="tabColor color-tab3" style="display: none; opacity: 1;">
                <div class="nobg"><img src="https://www.citroen.gr/wp-content/uploads/2014/05/nouvelle-C1-noircaldera-rear.jpg" data-src="https://www.citroen.gr/wp-content/uploads/2014/05/nouvelle-C1-noircaldera-rear.jpg" alt=" C1" class="responsive-images lazyloaded"></div>
              </div>
              <div role="tabpanel" id="colors-πίσω όψη-imgtab-4" aria-hidden="true" class="tabColor color-tab4" style="display: none; opacity: 1;">
                <div class="nobg"><img src="https://www.citroen.gr/wp-content/uploads/2014/05/nouvelle-C1-griscarlinite-rear.jpg" data-src="https://www.citroen.gr/wp-content/uploads/2014/05/nouvelle-C1-griscarlinite-rear.jpg" alt=" C1" class="responsive-images lazyloaded"></div>
              </div>
              <div role="tabpanel" id="colors-πίσω όψη-imgtab-5" aria-hidden="true" class="tabColor color-tab5" style="display: none; opacity: 1;">
                <div class="nobg"><img src="https://www.citroen.gr/wp-content/uploads/2014/05/nouvelle-C1-grisgallium-rear.jpg" data-src="https://www.citroen.gr/wp-content/uploads/2014/05/nouvelle-C1-grisgallium-rear.jpg" alt=" C1" class="responsive-images lazyloaded"></div>
              </div>
              <div role="tabpanel" id="colors-πίσω όψη-imgtab-6" aria-hidden="true" class="tabColor color-tab6" style="display: none; opacity: 1;">
                <div class="nobg"><img src="https://www.citroen.gr/wp-content/uploads/2018/02/ultra_emerald_back-2.jpg" data-src="https://www.citroen.gr/wp-content/uploads/2018/02/ultra_emerald_back-2.jpg" alt=" C1" class="responsive-images lazyloaded"></div>
              </div>
              <div role="tabpanel" id="colors-πίσω όψη-imgtab-7" aria-hidden="true" class="tabColor color-tab7" style="display: none; opacity: 1;">
                <div class="nobg"><img src="https://www.citroen.gr/wp-content/uploads/2018/02/calvi_back.jpg" data-src="https://www.citroen.gr/wp-content/uploads/2018/02/calvi_back.jpg" alt=" C1" class="responsive-images lazyloaded"></div>
              </div>
              <div role="tabpanel" id="colors-πίσω όψη-imgtab-8" aria-hidden="true" class="tabColor color-tab8" style="display: none; opacity: 1;">
                <div class="nobg"><img src="https://www.citroen.gr/wp-content/uploads/2018/02/nude-back.jpg" data-src="https://www.citroen.gr/wp-content/uploads/2018/02/nude-back.jpg" alt=" C1" class="responsive-images lazyloaded"></div>
              </div>
            </div>
            <!--back-car-->

            <div class="column-picker color-picker">
              <ul class="color-variations" role="tablist">
                <li role="tab" tabindex="0" aria-selected="true" aria-controls="colors-μπροστά όψη-imgtab-1"><a href="#" data-tab="color-tab1" class="activeRoll active"><img src="https://www.citroen.gr/wp-content/uploads/2019/06/Blanc-Lipizan-.png" alt="" class="responsive-images">
                    <p>Blanc Lipizan</p>
                  </a></li>
                <li role="tab" tabindex="-1" aria-selected="false" aria-controls="colors-μπροστά όψη-imgtab-2"><a href="#" data-tab="color-tab2" class="activeRoll"><img src="https://www.citroen.gr/wp-content/uploads/2018/02/0MP00NY2.png" alt="" class="responsive-images">
                    <p>Rouge Scarlet</p>
                  </a></li>
                <li role="tab" tabindex="-1" aria-selected="false" aria-controls="colors-μπροστά όψη-imgtab-3"><a href="#" data-tab="color-tab3" class="activeRoll"><img src="https://www.citroen.gr/wp-content/uploads/2018/03/NoirCaldera.png" alt="" class="responsive-images">
                    <p>Noir Caldera</p>
                  </a></li>
                <li role="tab" tabindex="-1" aria-selected="false" aria-controls="colors-μπροστά όψη-imgtab-4"><a href="#" data-tab="color-tab4" class="activeRoll"><img src="https://www.citroen.gr/wp-content/uploads/2019/06/Gris-Carlinite-.png" alt="" class="responsive-images">
                    <p>Gris Carlinite</p>
                  </a></li>
                <li role="tab" tabindex="-1" aria-selected="false" aria-controls="colors-μπροστά όψη-imgtab-5"><a href="#" data-tab="color-tab5" class="activeRoll"><img src="https://www.citroen.gr/wp-content/uploads/2019/06/Gris-Gallium-.png" alt="" class="responsive-images">
                    <p>Gris Gallium</p>
                  </a></li>
                <li role="tab" tabindex="-1" aria-selected="false" aria-controls="colors-μπροστά όψη-imgtab-6"><a href="#" data-tab="color-tab6" class="activeRoll"><img src="https://www.citroen.gr/wp-content/uploads/2018/02/ultra_emerald.jpg" alt="" class="responsive-images">
                    <p>Ultra Emeraude</p>
                  </a></li>
                <li role="tab" tabindex="-1" aria-selected="false" aria-controls="colors-μπροστά όψη-imgtab-7"><a href="#" data-tab="color-tab7" class="activeRoll"><img src="https://www.citroen.gr/wp-content/uploads/2019/06/Bleu-Calvi-.png" alt="" class="responsive-images">
                    <p>Bleu Calvi</p>
                  </a></li>
                <li role="tab" tabindex="-1" aria-selected="false" aria-controls="colors-μπροστά όψη-imgtab-8"><a href="#" data-tab="color-tab8" class="activeRoll"><img src="https://www.citroen.gr/wp-content/uploads/2018/02/0MP00NPE.png" alt="" class="responsive-images">
                    <p>Nude</p>
                  </a></li>
              </ul>
              <div class="color-title">Blanc Lipizan</div>
              <div class="view-selector-wrapper">
                <div class="view-selector-row">
                  <div class="view-selector-title">ΕΠΙΛΟΓΗ ΟΨΗΣ</div>
                  <div class="vc-row">
                    <div data-view="front" class="vbselect active"><img src="https://master.citroen-hellas.gr/images/front.png" />ΕΜΠΡΟΣ</div>
                    <div data-view="back" class="vbselect"><img src="https://master.citroen-hellas.gr/images/back.png" />ΠΙΣΩ</div>
                  </div>
                </div>
              </div>
            </div>
            <!--column-picker color-picker-->

          </div>

        </div>
      </div>
    </div>
  </div>
</div>
.color-picker-row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1110px;
  margin: 0 auto;
}
.column-picker.main-car {
  width: 58.4%;
}
.column-picker.color-picker {
  position: relative;
  width: 41.6%;
}
.main-car img {
  width: 100%;
}
.color-variations {
  list-style: none;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 0;
  max-width: 340px;
  display: flex;
  flex-wrap: wrap;
}
.color-variations li {
  display: inline-block;
  width: 25%;
  padding: 0;
  margin-bottom: 20px;
  max-width: 64px;
  margin-right: 25px;
}
.color-variations li a {
  padding: 0;
  display: block;
  width: 100%;
}
.color-variations li a p {
  position: absolute;
  display: none;
  text-transform: uppercase;
  font-size: 0.6rem;
  color: #646464;
}
.color-variations li a.active-color p {
  display: inline-block;
  top: 42px;
  width: 120px;
  left: -47px;
  text-align: center;
}
.color-variations li img {
  display: block;
  max-width: 100%;
  height: 64px;
  width: 64px;
  border-radius: 100%;
}
.color-variations li:nth-child(4n) {
  margin-right: 0;
}
.color-variations li:hover p {
  display: block;
  width: 100%;
  margin: 0;
  z-index: 9;
  max-width: 124px;
  text-align: center;
  margin-left: -30px;
  z-index: 9999;
  padding-top: 12px;
  padding-bottom: 5px;
  background-position: center;
  z-index: 999;
  font-size: 13px;
  margin-top: -11px;
  background-image: url(https://master.citroen-hellas.gr/images/tringle_bg.png);
}
.vc-row {
  max-width: 337px;
  display: flex;
  justify-content: space-between;
  border: solid 1px #b3afc4;
}
.vbselect.active {
  display: flex;
  align-items: center;
}
.vbselect {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7.5px;
  margin-top: 6.5px;
  margin-bottom: 5.5px;
  cursor: pointer;
}
.vbselect img {
  margin-right: 8px;
}
.view-selector-title {
  color: #307c91;
}
.vbselect:first-child {
  border-right: solid 1px #b3afc4;
}
$(".color-variations li a").click(function () {
  var color = $(this).data("tab");
  var color_text = $(this).find("p").text();
  $(".color-title").text(color_text);
  $(".color-variations li a").removeClass("active");
  $(this).addClass("active");
  $(".tabColor").removeClass("active");
  $(".tabColor").css("display", "none");
  $("." + color).addClass("active");
  $("." + color).css({ display: "block", opacity: "1" });
});

$(".vbselect").click(function () {
  var view = $(this).data("view");
  $(".vbselect").removeClass("active");
  $(this).addClass("active");
  $(".column-picker.main-car").css({ display: "none", opacity: "0" });
  $("#" + view).css({ display: "block", opacity: "1" });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js