Forum - Korkpinnwand mit Bildern

<div class="drybn-polaroid">
  <div class="pin">
    <!-- Hier kann man ein Bild einfügen für den pin  -->
    <img src="https://i.ibb.co/bNJbGvD/pin.png" alt="pushpin">
  </div>
  <div class="drybn-polaroid__overlay">
    <div class="drybn-polaroid__content">
      <div class="polaroid-image">
         <!-- Hier kann man ein Bild einfügen für das Polaroid  -->
        <img src="https://i.ibb.co/bQvmLZR/Abendessen.jpg" alt="polaroid">
      </div>
      <div class="polaroid-date">
        <p>Mo, 10. Oktober 2022</p>
      </div>
      <div class="polaroid-caption">
        <h2>Pilze Essen!</h2>
      </div>
    </div>
  </div>
</div>
 
<div class="drybn-polaroid">
  <div class="pin">
     <!-- Hier kann man ein Bild einfügen für den pin  -->
    <img src="https://i.ibb.co/bNJbGvD/pin.png" alt="pushpin">
  </div>
  <div class="drybn-polaroid__overlay">
    <div class="drybn-polaroid__content">
      <div class="polaroid-image">
        <!-- Hier kann man ein Bild einfügen für das Polaroid  -->
        <img src="https://i.ibb.co/FhGnPz5/meine-ausbeute-heute.jpg" alt="polaroid">
      </div>
      <div class="polaroid-date">
        <p>Mo, 10. Oktober 2022</p>
      </div>
      <div class="polaroid-caption">
        <h2>Meine Ausbeute</h2>
      </div>
    </div>
  </div>
</div>
 
<div class="drybn-polaroid">
  <div class="pin">
     <!-- Hier kann man ein Bild einfügen für den pin  -->
    <img src="https://i.ibb.co/bNJbGvD/pin.png" alt="pushpin">
  </div>
  <div class="drybn-polaroid__overlay">
    <div class="drybn-polaroid__content">
      <div class="polaroid-image">
        <!-- Hier kann man ein Bild einfügen für das Polaroid  -->
        <img src="https://i.ibb.co/rmRPvm0/1gro-e-marone.jpg" alt="polaroid">
      </div>
      <div class="polaroid-date">
        <p>Mo, 10. Oktober 2022</p>
      </div>
      <div class="polaroid-caption">
        <h2>Große Marone</h2>
      </div>
    </div>
  </div>
</div>
 
<div class="drybn-polaroid">
  <div class="pin">
     <!-- Hier kann man ein Bild einfügen für den pin  -->
    <img src="https://i.ibb.co/bNJbGvD/pin.png" alt="pushpin">
  </div>
  <div class="drybn-polaroid__overlay">
    <div class="drybn-polaroid__content">
      <div class="polaroid-image">
        <!-- Hier kann man ein Bild einfügen für das Polaroid  -->
        <img src="https://i.ibb.co/PGWgGhQ/Alma-g-hnt.jpg" alt="polaroid">
      </div>
      <div class="polaroid-date">
        <p>Di, 27. September 2022</p>
      </div>
      <div class="polaroid-caption">
        <h2>Alma Gähnt</h2>
      </div>
    </div>
  </div>
</div>
 
<div class="drybn-polaroid">
  <div class="pin">
     <!-- Hier kann man ein Bild einfügen für den pin  -->
    <img src="https://i.ibb.co/bNJbGvD/pin.png" alt="pushpin">
  </div>
  <div class="drybn-polaroid__overlay">
    <div class="drybn-polaroid__content">
      <div class="polaroid-image">
        <!-- Hier kann man ein Bild einfügen für das Polaroid  -->
        <img src="https://i.ibb.co/VwgvYz7/Bildschirmfoto-vom-2022-10-15-11-12-21.png" alt="polaroid">
      </div>
      <div class="polaroid-date">
        <p>Sa, 8. Januar 2022</p>
      </div>
      <div class="polaroid-caption">
        <h2>Glückliches Mitglied</h2>
      </div>
    </div>
  </div>
</div>
 
<div class="drybn-polaroid">
  <div class="pin">
     <!-- Hier kann man ein Bild einfügen für den pin  -->
    <img src="https://i.ibb.co/bNJbGvD/pin.png" alt="pushpin">
  </div>
  <div class="drybn-polaroid__overlay">
    <div class="drybn-polaroid__content">
      <div class="polaroid-image">
        
      </div>
      <div class="polaroid-date">
        <p>Fr, 8. Juli 2022</p>
      </div>
      <div class="polaroid-caption">
        <h2>|</h2>
      </div>
    </div>
  </div>
</div>
 
<!-- Hier beginnt das Javascript  -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 
<script id="rendered-js">
$(function () {
  $(".drybn-polaroid").draggable();
 
  $(".drybn-polaroid").on("mousedown", function (event) {
    $(event.currentTarget).find(".pin").hide();
  });
  $(".drybn-polaroid").on("mouseup", function (event) {
    $(event.currentTarget).find(".pin").show();
  });
});
//# sourceURL=pen.js
    </script>  
 

body {
  padding: 0;
  margin: 0;
  background: url("https://i.ibb.co/GHsJYFQ/corkboard.jpg");
}
 
.drybn-polaroid {
  width: 300px;
  height: 340px;
  background: #fff;
  padding: 1rem;
  position: absolute;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  transform: rotate(-2deg);
  bottom: 0;
  left: 50%;
}
 
.drybn-polaroid:hover {
  cursor: grab;
}
 
.drybn-polaroid:nth-child(2n) {
  transform: rotate(2deg);
}
 
.drybn-polaroid:nth-child(3n) {
  transform: rotate(1deg);
}
 
.drybn-polaroid:nth-child(4n) {
  transform: rotate(0deg);
}
 
.drybn-polaroid:nth-child(5n) {
  transform: rotate(-3deg);
}
 
.drybn-polaroid::after {
  content: "";
  background-color: white;
  height: 100%;
  width: 1rem;
  position: absolute;
  top: 0;
  right: 0;
  border: 1px solid #ddd;
  box-sizing: border-box;
}
 
.drybn-polaroid::before {
  content: "";
  background-color: white;
  height: 100%;
  width: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #ddd;
  box-sizing: border-box;
}
 
.polaroid-image {
  width: 100%;
  height: calc(300px - 2rem);
  background: #2a2a2a;
  margin: 0 auto;
  position: relative;
}
 
.polaroid-image img {
  width: 300px;
  height: calc(300px - 2rem);
  object-fit: cover;
  box-sizing: border-box;
  border: 1px solid #aaa;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24) inset;
  filter: sepia(50%);
}
 
.polaroid-date p {
  font-family: "Wallpoet", cursive;
  color: #3d0400;
  letter-spacing: 3px;
  background-color: white;
  height: 1rem;
  width: 100%;
  margin: 0;
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
}
 
.polaroid-caption {
  text-align: center;
  font-size: 1rem;
  position: relative;
}
 
.polaroid-caption h2 {
  font-family: "Gloria Hallelujah", cursive;
  margin: 0.5rem;
  transform: rotate(-2deg);
}
 
.pin img {
  width: 48px;
  position: absolute;
  top: -1.75rem;
  left: 50%;
  transform: translate(-50%);
}