Toggleable

by frumbert

HTML

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<figure>
		<img src="https://placehold.it/150">
		<figcaption><i class="material-icons">check_box_outline_blank</i></figcaption>
</figure>

<figure class="selected">
		<img src="https://placehold.it/150">
		<figcaption><i class="material-icons">check_box_outline_blank</i></figcaption>
</figure>

CSS

figure {
  position: relative;
  width: 150px;
  padding: 5px;
  margin: 0 5px 5px 0;
  display: inline-block;
  border: 1px solid #999;
  background-color: #fff;
}
figure img {
  max-width: 100%;
  margin: 0;
}
figure figcaption {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #999;
  color: #fff;
}
figure figcaption i {
  vertical-align: middle;
}
figure.selected figcaption {
  background-color: #99f;
}

figure.selected figcaption i {
  content: "check_box";
 }
}