Box Sortierbar

Katzen

Alle Kater Katze 1 - 4 Jahre 5 - 9 Jahre

Peter

Kater / 9 Jahre

weiter

Paula

Katze / 8 Jahre

weiter

Hanni

Kater / 1 Jahr

weiter

Mietze

Katze / 3 Jahre

weiter

Minka

Katze / 5 Jahre

weiter

Hansi

Kater / 7 Jahre

weiter

Girli

Katze / 5 Jahre

weiter

Chef

Kater / 8 Jahre

weiter

Mietzi

Katze / 1 Jahr

weiter

CSS-Code

Diesen Code per Einstellungen > CSS einfügen und anpassen.

.column {
    text-align: center;
color: #990000;
font-size: 1.1em;
    float: left;
    width: 390px;
    display: none; /* Hide all elements by default */
    transform: scale(.96, .96);
    transition: all 150ms;
}
.column h4 {
color: #990000;
font-size: 1.3em;
}
.column:hover {
transform: scale(1, 1);
}
@media (max-width: 426px) {
.column {
     width: 96%;
}}

.row:after {
    content: "";
    display: table;
    clear: both;
}
.box {
    background-color: rgba(255, 255, 255, 0.85);
    padding: 10px;
}
.show {
  display: block;
}

.button2 {
display: inline-block;
padding: 2px 12px;
color: #990000;
background-color: transparent;
border: 1px solid #990000;
text-align: center;
outline: none;
margin-top: 10px;
text-decoration: none;
transition: background-color 0.2s ease-out,
color 0.2s ease-out;
}
.button2:hover,
.button2:active {
background-color: #990000;
color: #FFFFFF;
border: 1px solid #990000;
text-decoration: none;
transition: background-color 0.3s ease-in,
color 0.3s ease-in;
}
</style>

markieren & kopieren

Quellcode

Diesen Code per Widget > Quelltext einfügen und anpassen.

<h2>Katzen</h2>
<input type="radio" onclick="filterSelection('all')" name="category" checked> Alle
<input type="radio" onclick="filterSelection('kater')" name="category"> Kater
<input type="radio" onclick="filterSelection('katze')" name="category"> Katze
<input type="radio" onclick="filterSelection('jung')" name="category"> 1 - 4 Jahre
<input type="radio" onclick="filterSelection('alt')" name="category"> 5 - 9 Jahre

<div class="row">
  <div class="column kater alt">
    <div class="box">
      <img src="http://www.zella.de/code/bilder/katze500x333/1.jpg" alt="Katze" style="width:100%">
      <h4>Peter</h4>
      <p>Kater / 9 Jahre</p>
      <p><a class="button2" href="#">weiter</a></p>
    </div>
  </div>
  <div class="column katze alt">
    <div class="box">
      <img src="http://www.zella.de/code/bilder/katze500x333/2.jpg" alt="Katze" style="width:100%">
      <h4>Paula</h4>
      <p>Katze / 8 Jahre</p>
<p><a class="button2" href="#">weiter</a></p>
    </div>
  </div>
  <div class="column kater jung">
    <div class="box">
      <img src="http://www.zella.de/code/bilder/katze500x333/3.jpg" alt="Katze" style="width:100%">
      <h4>Hanni</h4>
      <p>Kater / 1 Jahr</p>
      <p><a class="button2" href="#">weiter</a></p>
    </div>
  </div>
  
  <div class="column katze jung">
    <div class="box">
      <img src="http://www.zella.de/code/bilder/katze500x333/4.jpg" alt="Katze" style="width:100%">
      <h4>Mietze</h4>
      <p>Katze / 3 Jahre</p>
      <p><a class="button2" href="#">weiter</a></p>
    </div>
  </div>
  <div class="column katze alt">
    <div class="box">
      <img src="http://www.zella.de/code/bilder/katze500x333/5.jpg" alt="Katze" style="width:100%">
      <h4>Minka</h4>
       <p>Katze / 5 Jahre</p>
      <p><a class="button2" href="#">weiter</a></p>
    </div>
  </div>
  <div class="column kater alt">
    <div class="box">
      <img src="http://www.zella.de/code/bilder/katze500x333/6.jpg" alt="Katze" style="width:100%">
      <h4>Hansi</h4>
      <p>Kater / 7 Jahre</p>
      <p><a class="button2" href="#">weiter</a></p>
    </div>
  </div>

<div class="column katze alt">
    <div class="box">
      <img src="http://www.zella.de/code/bilder/katze500x333/7.jpg" alt="Katze" style="width:100%">
      <h4>Girli</h4>
      <p>Katze / 5 Jahre</p>
      <p><a class="button2" href="#">weiter</a></p>
    </div>
  </div>
  <div class="column kater alt">
    <div class="box">
      <img src="http://www.zella.de/code/bilder/katze500x333/8.jpg" alt="Katze" style="width:100%">
      <h4>Chef</h4>
      <p>Kater / 8 Jahre</p>
      <p><a class="button2" href="#">weiter</a></p>
    </div>
  </div>
  <div class="column katze jung">
    <div class="box">
      <img src="http://www.zella.de/code/bilder/katze500x333/9.jpg" alt="Katze" style="width:100%">
      <h4>Mietzi</h4>
      <p>Katze / 1 Jahr</p>
      <p><a class="button2" href="#">weiter</a></p>
    </div>
  </div>
</div>

markieren & kopieren

Box Sortierbar

Katzen

Peter

Paula

Hanni

Mietze

Minka

Hansi

Girli

Chef

Mietzi

CSS-Code

Quellcode

NEUE BEITRÄGE