i want the image to be overlay-ed with any color and give a tick mark on it(As it is selected) allowing only one image at a time. while clicking other image it should hide the previous one and show tick and overlay on new image.

<div class="grid-two imageandtext">
                                    <figure>

                                        <img src="assets/images/painting.jpg" class="img-thumbnail">
                                        <div class="caption">
                                            <p>Painting</p>
                                        </div>                     
                                        <div class="imageandtext image_grid">
                                            <img src="assets/images/photography.jpg" class="img-thumbnail" >
                                            <div class="caption1">
                                                <p>Photography</p>
                                            </div></div>
                                        </figure>
                                    </div>

it should display like below image

now it is working like this

/

i want the image to be overlay-ed with any color and give a tick mark on it(As it is selected) allowing only one image at a time. while clicking other image it should hide the previous one and show tick and overlay on new image.

<div class="grid-two imageandtext">
                                    <figure>

                                        <img src="assets/images/painting.jpg" class="img-thumbnail">
                                        <div class="caption">
                                            <p>Painting</p>
                                        </div>                     
                                        <div class="imageandtext image_grid">
                                            <img src="assets/images/photography.jpg" class="img-thumbnail" >
                                            <div class="caption1">
                                                <p>Photography</p>
                                            </div></div>
                                        </figure>
                                    </div>

it should display like below image

now it is working like this

https://jsfiddle/liza_susan/L8jyum77/

• javascript
• html
• twitter-bootstrap
• css

• 1 First of all, wele to Stack Overflow. You are expected to create a Minimal, Complete, and Verifiable example when asking a question. – James Douglas Commented Jun 7, 2017 at 8:16
• i added a jsfiddle, please excuse the style, i need to show one image as selected. – liza Commented Jun 7, 2017 at 8:30
• Your link is dead :( – Angela Amarapala Commented Jun 7, 2017 at 8:31
• jsfiddle/liza_susan/2jwc4dph – liza Commented Jun 7, 2017 at 8:40
• sorry please check this one jsfiddle/liza_susan/L8jyum77 – liza Commented Jun 7, 2017 at 8:45

3 Answers 3

Here is a start, using a pseudo element for the cover, a label and an input of type radio to take care of the selection.

I wrapped the image in a label, and when clicked, it simply checks the input.

In the CSS, when an input is checked, the .image_grid input:checked + .caption::after rule apply the properties to cover and show the check mark.

Updated fiddle

.caption {
  position: absolute;
  top: 0;
  left: 5px;                            /*  changed to match image_grid padding  */
  height: 100%;
  width: calc(100% - 5px);              /*  changed to match image_grid padding  */
  padding: 0 10px;
  box-sizing: border-box;
  pointer-events: none;
}
.caption p {
  display: inline-block;
  padding: 10px;
  color: #fff;
  background: rgba(0,0,0,0.5);
  font-family: 'Myriad Pro regular';
  font-size: 15.31px;
}
.imageandtext {
  position: relative;
}
.image_grid {
  display: inline-block;
  padding-left: 5px;
}
.image_grid img {                       /*  added rule  */
  display: block;
}
.image_grid input {
  display: none;
}
.image_grid input:checked + .caption {
  background: rgba(0,0,0,0.5);
}
.image_grid input:checked + .caption::after {
  content: '✔';    
  position: absolute;
  top: 50%; left: 50%;
  width: 70px; height: 70px;
  transform: translate(-50%,-50%);
  color: white;
  font-size: 60px;
  line-height: 80px;
  text-align: center;
  border: 2px solid white;
  border-radius: 50%;
}

<div class="grid-two imageandtext">

  <div class="imageandtext image_grid">
    <label for="selimg1">
      <img src="http://yaitisme./images/getImage.jpg" class="img-thumbnail">
    </label>
    <input type="radio" name="selimg" id="selimg1">
    <div class="caption">
      <p>Painting</p>
    </div>
  </div>

  <div class="imageandtext image_grid">
    <label for="selimg2">
      <img src="http://yaitisme./images/getImage.jpg" class="img-thumbnail">
    </label>
    <input type="radio" name="selimg" id="selimg2">
    <div class="caption">
      <p>Photography</p>
    </div>
  </div>

</div>

Based on a ment, here is a version where the caption is positioned inside the label, as a span (as label can only have inline element as children).

With this one doesn't need unique id on the input and can drop the for attribute, and no need to pensate for any padding and/or margin set on the image_grid.

Updated fiddle

Stack snippet

.caption {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  pointer-events: none;
}
.caption span {
  display: inline-block;
  padding: 10px;
  color: #fff;
  background: rgba(0,0,0,0.5);
  font-family: 'Myriad Pro regular';
  font-size: 15.31px;
}
.image_grid {
  display: inline-block;
  padding-left: 25px;
}
.image_grid label {
  position: relative;
  display: inline-block;
}
.image_grid img {
  display: block;
}
.image_grid input {
  display: none;
}

.image_grid input:checked + .caption {
  background: rgba(0,0,0,0.5);
}
.image_grid input:checked + .caption::after {
  content: '✔';    
  position: absolute;
  top: 50%; left: 50%;
  width: 70px; height: 70px;
  transform: translate(-50%,-50%);
  color: white;
  font-size: 60px;
  line-height: 80px;
  text-align: center;
  border: 2px solid white;
  border-radius: 50%;
}

<div class="grid-two imageandtext">

  <div class="imageandtext image_grid">
    <label>
      <img src="http://yaitisme./images/getImage.jpg" class="img-thumbnail">
      <input type="radio" name="selimg">
      <span class="caption">
        <span>Painting</span>
      </span>
    </label>
  </div>

  <div class="imageandtext image_grid">
    <label>
      <img src="http://yaitisme./images/getImage.jpg" class="img-thumbnail">
      <input type="radio" name="selimg">
      <span class="caption">
        <span>Painting</span>
      </span>
    </label>
  </div>

</div>

How about adding an image when someone hovers over it.

i.e.

.image-thumbnail:hover {
    background-image: <path to image>;
    background-repeat: no-repeat;
}

How about this JQuery function:

$('.image_grid').click(function() {
  $('.image_grid img:nth-of-type(2)').hide();
  $(this).children('img:nth-of-type(2)').show();
});

$('.image_grid').click(function() {
  $('.image_grid img:nth-of-type(2)').hide();
  $(this).children('img:nth-of-type(2)').show();
});

.grid-two {
  width: 50%;
  display: inline;
}
.caption1 {
  position: absolute;
  top: -51px;
  left: 11px;
  width: 100%;
  color: #000;
  font-family: Myriad Pro regular;
  font-size: 15.31px;
}
.imageandtext {
  position: relative;
}
.image_grid {
  display: inline;
  padding-left: 5px;
}
.absolute {
  border: 1px solid black;
  position: absolute;
  left: 0px;
  display: none;
  width: 50%;
  margin: 25%;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="grid-two imageandtext">
  <figure>
    <div class="imageandtext image_grid">
      <img src="http://yaitisme./images/getImage.jpg" class="img-thumbnail">
      <div class="caption1">
        <p>Painting</p>
      </div>
      <img src="https://i.sstatic/Kg1Do.png" class="absolute">
    </div>
    <div class="imageandtext image_grid">
      <img src="http://yaitisme./images/getImage.jpg" class="img-thumbnail">
      <div class="caption1">
        <p>Photography</p>
      </div>
      <img src="https://i.sstatic/Kg1Do.png" class="absolute">
    </div>
  </figure>
</div>

JSFiddle