How to create a multicolumn section with popup image and text?

[Sohan2198]

Hello, 
I want to create a section like multicolumn. In this section when someone clicks on the image it shows a click pop-like image with a text section.

Please check & resolve the same

Best Regard

Sohan

[Anonymous]

Hi there @Sohan2198 

Hi there can you elaborate in detail what else do you need, also if there is any website for reference it will help me create your custom more quickly.

[Sohan2198]

Hello @Anonymous,

On clicking the image I need that popup  https://codepen.io/Idered/pen/DdeoeW
In each popup generate different content

[Sohan2198]

Hello @Anonymous ,

Any updates

[Sohan2198 · Accepted solution]

Hello 
I try and write a code for the  section but I facing issue when need one more image column 

 <style>
/* [Object] Modal
 * =============================== */
 .modal {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: left;
  background: rgba(0,0,0, .9);
  transition: opacity .25s ease;
}

.modal__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer;
}

.modal-state {
  display: none;
}

.modal-state:checked + .modal {
  opacity: 1;
  visibility: visible;
}

.modal-state:checked + .modal .modal__inner {
  top: 0;
}

.modal__inner {
  transition: top .25s ease;
  position: absolute;
  top: -20%;
  right: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  margin: auto;
  overflow: auto;
  background: #fff;
  border-radius: 5px;
  padding: 1em 2em;
  height: 50%;
}

.modal__close {
  position: absolute;
  right: 1em;
  top: 1em;
  width: 1.1em;
  height: 1.1em;
  cursor: pointer;
}

.modal__close:after,
.modal__close:before {
  content: '';
  position: absolute;
  width: 2px;
  height: 1.5em;
  background: #ccc;
  display: block;
  transform: rotate(45deg);
  left: 50%;
  margin: -3px 0 0 -1px;
  top: 0;
}

.modal__close:hover:after,
.modal__close:hover:before {
  background: #aaa;
}

.modal__close:before {
  transform: rotate(-45deg);
}

@media screen and (max-width: 768px) {
	
  .modal__inner {
    width: 90%;
    height: 90%;
    box-sizing: border-box;
  }
  .photo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(89px, 2fr));
    grid-gap: 10px;
    column-gap: 99px;
}
}


/* Other
 * =============================== */
.photo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 10px; /* Adjust gap between elements as needed */
  }
.btn {
  cursor: pointer;
  background: #27ae60;
  display: inline-block;
  color: #fff;
  border-radius: 3px;
}

.btn:hover,
.btn:focus {
  background: #2ecc71;
}

.btn:active {
  background: #27ae60;
  box-shadow: 0 1px 2px rgba(0,0,0, .2) inset;
}

.btn--blue {
  background: #2980b9;
}

.btn--blue:hover,
.btn--blue:focus {
  background: #3498db;
}

.btn--blue:active {
  background: #2980b9;
}

 img {
  max-width: 300px;
  height: auto;
  float: left;
  margin: 0 0 1em 0;
}
.text {
  width: 49% !important;
  /* padding-left: 100px; */
  float: right;
}
.im img {
  max-width: 49%;
  height: auto;
  float: left;
  margin: 0 0em 1em 0;
}
@media screen (min-width:600px){
.multicolumn.container {
    padding: 7rem 10rem;
}
}
.title{
    text-align: center;
    font-size: xxx-large;
}
 </style>
<div class="multicolumn container">
  <h2 class="title">{{ 'meet our team' }}</h2>
  <div class="photo">
    <label  for="modal-1"><img class="btn" src="{{ section.settings.image_1_icon | img_url: 'master' }}" width="250" alt="{{ section.settings.image_1_icon.alt }}"></label>
    <label  for="modal-2"><img class="btn btn--blue" src="{{ section.settings.image_2_icon | img_url: 'master' }}" width="250" alt="{{ section.settings.image_2_icon.alt }}"></label>
    <label  for="modal-3"><img class="btn btn--blue" src="{{ section.settings.image_3_icon | img_url: 'master' }}" width="250" alt="{{ section.settings.image_3_icon.alt }}"></label>
     <label  for="modal-4"><img class="btn" src="{{ section.settings.image_4_icon | img_url: 'master' }}" width="250" alt="{{ section.settings.image_4_icon.alt }}"></label>
  </div>
</div>


<input class="modal-state" id="modal-1" type="checkbox" />
<div class="modal">
  <label class="modal__bg" for="modal-1"></label>
  <div class="modal__inner">
    <label class="modal__close" for="modal-1"></label>
   <h2>{{ section.settings.model_1_heading }}</h2>
      <div class="im">
        <img src="{{ section.settings.model_1_icon | img_url: 'master' }}" width="450" alt="{{ section.settings.model_1_icon.alt }}">
      </div>
      <div class="text">
   <p>{{ section.settings.model_1_description }}</p>
      </div>
  </div>
</div>

<input class="modal-state" id="modal-2" type="checkbox" />
<div class="modal">
  <label class="modal__bg" for="modal-2"></label>
  <div class="modal__inner">
    <label class="modal__close" for="modal-2"></label>
 <h2>{{ section.settings.model_2_heading }}</h2>
      <div class="im">
               <img src="{{ section.settings.model_2_icon | img_url: 'master' }}" width="450" alt="{{ section.settings.model_2_icon.alt }}">

      </div>
      <div class="text">
   <p>{{ section.settings.model_2_description }}</p>
      </div>
  </div>
</div>
  <input class="modal-state" id="modal-3" type="checkbox" />
  <div class="modal">
    <label class="modal__bg" for="modal-3"></label>
    <div class="modal__inner">
      <label class="modal__close" for="modal-3"></label>
 <h2>{{ section.settings.model_3_heading }}</h2>
        <div class="im">
                     <img src="{{ section.settings.model_3_icon | img_url: 'master' }}" width="450" alt="{{ section.settings.model_3_icon.alt }}">

        </div>
        <div class="text">
   <p>{{ section.settings.model_3_description }}</p>       
 </div>
    </div>
  </div>
  <input class="modal-state" id="modal-4"  />
  <div class="modal">
    <label class="modal__bg" for="modal-4"></label>
    <div class="modal__inner">
      <label class="modal__close" for="modal-4"></label>
 <h2>{{ section.settings.model_4_heading }}</h2>
        <div class="im">
                     <img src="{{ section.settings.model_4_icon | img_url: 'master' }}" width="450" alt="{{ section.settings.model_4_icon.alt }}">

        </div>
        <div class="text">
   <p>{{ section.settings.model_4_description }}</p>       
 </div>
    </div>
  </div>

{% schema %}
{
  "name": "pop-up",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "image_picker",
      "id": "image_1_icon",
      "label": "image_1_icon"
    },
    {
      "type": "image_picker",
      "id": "image_2_icon",
      "label": "image_2_icon"
    },
    {
      "type": "image_picker",
      "id": "image_3_icon",
      "label": "image_3_icon"
    },
    {
      "type": "image_picker",
      "id": "image_4_icon",
      "label": "image_4_icon"
    },
 {
      "type": "image_picker",
      "id": "model_1_icon",
      "label": "model_1_icon"
    },
   {
      "type": "text",
      "id": "model_1_heading",
      "label": "model_1_heading",
      "default": "model_1_heading."
    },
    {
      "type": "textarea",
      "id": "model_1_description",
      "label": "model_1_description",
      "default": "model_1_description."
    },

{
      "type": "image_picker",
      "id": "model_2_icon",
      "label": "model_2_icon"
    },
   {
      "type": "text",
      "id": "model_2_heading",
      "label": "model_2_heading",
      "default": "model_2_heading."
    },
    {
      "type": "textarea",
      "id": "model_2_description",
      "label": "model_2_description",
      "default": "model_2_description."
    },
{
      "type": "image_picker",
      "id": "model_3_icon",
      "label": "model_3_icon"
    },
   {
      "type": "text",
      "id": "model_3_heading",
      "label": "model_3_heading",
      "default": "model_3_heading."
    },
    {
      "type": "textarea",
      "id": "model_3_description",
      "label": "model_3_description",
      "default": "model_3_description."
    }
    ,
{
      "type": "image_picker",
      "id": "model_4_icon",
      "label": "model_4_icon"
    },
   {
      "type": "text",
      "id": "model_4_heading",
      "label": "model_4_heading",
      "default": "model_4_heading."
    },
    {
      "type": "textarea",
      "id": "model_4_description",
      "label": "model_4_description",
      "default": "model_4_description."
    }

  ],
 
  "presets": [
    {
      "name": "pop-up"
}
]
}
{% endschema %}

 please check 

Best 
sohan

[marvic]

Did you find a solution?