Locket with picture inside (opens when clicked + held)

<style>

.locketpicture {

  margin: auto;

  background: url('https://thumbs.dreamstime.com/b/three-baby-goats-cuddle-lush-green-meadow-adorable-huddle-together-field-grass-their-fluffy-white-brown-coats-321113248.jpg') no-repeat; /*REPLACE WITH DESIRED PICTURE*/

  background-size: 90px 110px;

  background-position: bottom 117px right 160px;

  position: relative;

  width: 350px; 

  height: 350px;

}

.locket {

  background:url('https://i.ibb.co/729JB0Y/locket1.png') no-repeat; 

  background-size: 85%;

  position: relative;

  width: 350px; 

  height: 350px;

} 

.locket:active {

  background:url('https://i.ibb.co/jz8YtYJ/locket2.png') no-repeat; 

  background-size: 85%;

  position: relative;

  width: 350px; 

  height: 350px;

}

</style>

<div class="locketpicture">

  <div class="locket"></div>

</div>