Hallo @guenniun ,
auf die Schnelle kann ich folgendes liefern.
Nächste Spiele:
- .rh4a-next-match-wrapper (div): Wrapper, in dem alle nächsten Spiele enthalten sind
- .rh4a-next-match (div): enthält ein nächstes Spiel
- .rh4a-next-match-class (span): Liga des nächsten Spiels
- .rh4a-next-match-datetime (span): Datum und Uhrzeit des nächsten Spiels
- .rh4a-next-match-clubs (span): Spielpaarung des nächsten Spiels
- .rh4a-next-match-location (span): Halle und Adresse des nächsten Spiels
Tabelle:
- .rh4a-standing (table): Tabelle (im wahrsten Sinne des Wortes)
- .rh4a-own-team-row (tr): Zeile, die das eigene Team enthält
Spielplan:
- .rh4a-timetable (table): Spielplan
- .rh4a-own-team-row (tr): Zeile, die das eigene Team enthält
- .rh4a-own-team-span (span): Name des eigenen Teams
- .rh4a-location-wrapper (div): Wrapper für die Halle und Adresse des Spiels (enthält das Icon und das Popover)
- .rh4a-location-icon (span): Location-Icon
- .rh4a-location-popover (div): Wrapper für Popover
- .rh4a-location-name (span): Name der Halle
Ich hoffe, das hilft.
Viele Grüße
Yannick
Hallo Yannick,
vielen Dank für die schnelle Reaktion – mega!
Ich habe bei euch auf der Seite gesehen, wie du das mit dem hovern bei deinen Posts gelöst hast. Ich finde das absolut schick! hast du einen Tipp für mich, wie du das gemacht hast?! 🙂
LG
Hallo,
die Idee habe ich auch von einer anderen Website. Genutzt habe ich die Bootstrap Cards (https://getbootstrap.com/docs/5.3/components/card/)
<article <?php post_class($post_css_classes." mb-2"); ?> id="post-<?php the_ID(); ?>">
<a href="<?php echo get_permalink(); ?>" class="card shadow-lg">
<div class="card-front">
<?php if(has_post_thumbnail()) { ?>
<figure class="mb-0">
<div class="card-img" style="background-image:url(<?php the_post_thumbnail_url("medium_large"); ?>);"></div>
</figure>
<?php } ?>
<div class="card-body">
<small class="text-uppercase"><?php echo get_the_date(); ?></small>
<?php
the_title( '<h3 class="card-title">', '</h3>' );
if(!has_post_thumbnail()) {
echo get_the_content('');
}
?>
</div>
<span class="sr-only sr-only-focusable">Weiterlesen</span>
</div>
<div class="card-back">
<div class="card-body">
<?php the_title( '<h3>', '</h3>' ); ?>
<?php echo get_the_content(''); ?>
</div>
<div class="card-footer">
<i class="fas fa-arrow-right"></i>
</div>
</div>
</a>
</article>
Folgendes CSS:
.card-back {
position:absolute;
top:0;
width:100%;
height:100%;
transform:translate(-100.5%,0);
transition:transform 0.4s ease-in-out;
color:$light;
}
article .card-back {
background:$dark;
}
.card-back:hover,
.card-front:hover + .card-back {
transform:translate(0,0);
}
.card-front {
flex-grow:1;
background:$light;
color:$dark;
figure {
width:100%;
padding-bottom:67%;
overflow:hidden;
position:relative;
div.card-img {
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
background-repeat: no-repeat;
background-size:cover;
background-position: center center;
}
}
}
.card {
overflow:hidden;
height:100%;
color:$body-color;
.card-title {
margin-bottom:0;
}
}
.card:hover {
text-decoration: none;
color:$body-color;
}
.card-footer {
background-color:transparent;
position:absolute;
bottom:0;
i {
font-size:25pt;
}
}
Mit ein bisschen Reverse Engineering kriegst du das bestimmt zum Laufen.
Viele Grüße
Yannick
