CSS Klassen

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