How do I show checkmark and overlay on image when the image is clicked, but when I click another image it should hide and show the same on the new image?

Question

How do I show checkmark and overlay on image when the image is clicked, but when I click another image it should hide and show the same on the new image?

I want the image to be overlaid with any color and mark on it (as it is selected), allowing only one image at a time. clicking another image, it should hide the previous one and show a checkmark and overlay on the 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 as shown below.

now it works like this

https://jsfiddle.net/liza_susan/L8jyum77/

+3

javascript html css3 twitter-bootstrap

liza 07 June 17 at 8:09

source to share

3 answers

How about adding an image when someone hovers over it?

those.

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

+1

user7761868 07 June 17 at 8:37

source to share

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.com/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.com/images/getImage.jpg" class="img-thumbnail">
      <div class="caption1">
        <p>Painting</p>
      </div>
      <img src="https://i.stack.imgur.com/Kg1Do.png" class="absolute">
    </div>
    <div class="imageandtext image_grid">
      <img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
      <div class="caption1">
        <p>Photography</p>
      </div>
      <img src="https://i.stack.imgur.com/Kg1Do.png" class="absolute">
    </div>
  </figure>
</div>

Run code Hide result

JSFiddle

0

James douglas 07 June 17 at 9:02

source to share

LGSon · Accepted Answer · 2017-06-07T08:56:16+0000

Here's a start, using a pseudo-element for the cover label

and input

type radio

to take care of the selection.

I have wrapped the image in a label and when clicked it just validates the input.

In CSS, when a checkbox is checked, the rule .image_grid input:checked + .caption::after

applies the properties to the skin and shows a checkmark.

Updated violin

.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.com/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.com/images/getImage.jpg" class="img-thumbnail">
    </label>
    <input type="radio" name="selimg" id="selimg2">
    <div class="caption">
      <p>Photography</p>
    </div>
  </div>

</div>

Run code Hide result

Based on a comment, here's a version that caption

fits inside label

as well span

(since label

can only have an inline element as children).

With this, there is no need for a unique identifier in input

and can drop the attribute for

, and there is no need to compensate for any padding and / or fields set to image_grid

.

Updated violin

Fragment of the stack

.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.com/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.com/images/getImage.jpg" class="img-thumbnail">
      <input type="radio" name="selimg">
      <span class="caption">
        <span>Painting</span>
      </span>
    </label>
  </div>

</div>

Run code Hide result

How do I show checkmark and overlay on image when the image is clicked, but when I click another image it should hide and show the same on the new image?

More articles: