Schwarz-Weiß bzw. Graufilter Effekt klappt nicht nach meinen Wünschen

tidot

Hallo zusammen, bin nicht neu hier, aber auch schon lange nicht mehr da gewesen.:roll:

Bisher habe ich immer Lösungen gefunden aber nun verzweifel ich seit Wochen - vielleicht weiß jemand Rat.

Ich habe ein Kategorienseite im Hueman Theme. Die Thumbnails werden dort durch den nachfolgenden Style (siehe Code ganz unten) in schwarz/weiß dargestellt. Wenn man nun mit der Maus über die Bilder fährt dann kommt der Hover-Effekt und die Bilder erhalten ihre ursprünglich Farbe.

Das klappt also auch soweit, allerdings wenn ich über ein Bild mit der Maus fahre werden alle Bilder wieder in Farbe angezeigt. (siehe Seite: http://www.bcwitterschlick.de/category/archiv/)

Ich will aber, das der Hover-Effekt bei jedem Bild einzeln erfolgt. Also alle anderen sollen schwarz/weiß bleiben.

Ich habe eine eigenes Template erstellt, dass ich der Kategorie Archiv zuweise. Dort habe ich die div-class "desaturate" eingetragen. Ich habe schon mehrere Versuche unternommen mittels has_post_thumbnail weiter zu kommen, aber das klappte alles nicht. Irgendwie mach ich einen Denkfehler.

Bin für jeden Lösungsvorschlag dankbar.

PHP

<?php
/**
 * Template Name: Eigenes Archivseiten Template
 */


get_header(); ?>


<section class="content">


    <?php hu_get_template_part('parts/page-title'); ?>


    <div class="pad group">
        
    <div class="desaturate">


        <?php if ((category_description() != '') && !is_paged()) : ?>
            <div class="notebox">
                <?php echo category_description(); ?>
            </div>
        <?php endif; ?>


            <?php if ( have_posts() ) : ?>
            <?php if ( hu_is_checked('blog-standard') ): ?>
                <?php while ( have_posts() ): the_post(); ?>
                    <?php get_template_part('content-standard'); ?>
                <?php endwhile; ?>
            <?php else: ?>
                                            
            <div class="post-list group">
                <?php global $wp_query; echo '<div class="post-row">'; while ( have_posts() ): the_post(); ?>
                <?php get_template_part('content'); ?>
                <?php if( ( $wp_query->current_post + 1 ) % 2 == 0 ) { echo '</div><div class="post-row">'; }; endwhile; echo '</div>'; ?>
            
            </div><!--/.post-list-->


            <?php endif; ?>


            <?php get_template_part('parts/pagination'); ?>


        <?php endif; ?>
        
        </div><!--/.pad-->


</section><!--/.content-->


<?php get_sidebar(); ?>


<?php get_footer(); ?>

Alles anzeigen

Code

.desaturate {
    filter: grayscale(100%); /* Standard */
    -webkit-filter: grayscale(100%); /* Webkit */
    filter: url(/elements/grayscale.svg#desaturate); /* Firefox 4-34 */
    filter: gray;  /* IE6-9 */
    -webkit-filter: grayscale(1); /* Old WebKit */
}


.desaturate:hover {
    filter: grayscale(0%);
    filter: none;
    -webkit-filter: grayscale(0); /* Old WebKit */
}

Alles anzeigen

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

tidot

So, ich habe eine andere Lösung gefunden:

Ich habe in meinem Child-Theme den code aus der content.php in ein neue namens content-meinarchiv.php kopiert. Dort habe ich den Style "desaturate" aktiviert und folgend in dem oben angegebenen Template[COLOR=#000000][COLOR=#FF8000] "Eigenes Archivseiten Template[/COLOR][/COLOR]" die "content-meinarchiv" entsprechend plaziert.

Das ganze ist zwar etwas umständlich, aber es funktioniert nun.

PHP

.............
                                           
            <div class="post-list group">
                <?php global $wp_query; echo '<div class="post-row">'; while ( have_posts() ): the_post(); ?>
                <?php get_template_part('content-meinarchiv'); ?>
                <?php if( ( $wp_query->current_post + 1 ) % 2 == 0 ) { echo '</div><div class="post-row">'; }; endwhile; echo '</div>'; ?>
            
            </div><!--/.post-list-->
..............

Falls doch jemand ein Idee hat wie ich ohne diesen Umweg einen Code direkt setzen kann, wäre ich dankbar.

Hier noch der Code aus dem veränderten content.php:

PHP

<article id="post-<?php the_ID(); ?>" <?php post_class( array('group', 'grid-item') ); ?>>
    <div class="post-inner desaturate post-hover">
          
                 <div class="post-thumbnail">
            <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                <?php hu_the_post_thumbnail('thumb-medium'); ?>
                <?php if ( has_post_format('video') && !is_sticky() ) echo'<span class="thumb-icon"><i class="fa fa-play"></i></span>'; ?>
                <?php if ( has_post_format('audio') && !is_sticky() ) echo'<span class="thumb-icon"><i class="fa fa-volume-up"></i></span>'; ?>
                <?php if ( is_sticky() ) echo'<span class="thumb-icon"><i class="fa fa-star"></i></span>'; ?>
                
            </a>
            <?php if ( comments_open() && ( hu_is_checked( 'comment-count' ) ) ): ?>
                <a class="post-comments" href="<?php comments_link(); ?>"><span><i class="fa fa-comments-o"></i><?php comments_number( '0', '1', '%' ); ?></span></a>
            <?php endif; ?>
        </div><!--/.post-thumbnail-->


        <div class="post-meta group">
            <p class="post-category"><?php the_category(' / '); ?></p>
            <?php get_template_part('parts/post-list-author-date'); ?>
        </div><!--/.post-meta-->


        <h2 class="post-title entry-title">
            <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
        </h2><!--/.post-title-->


        <?php if (hu_get_option('excerpt-length') != '0'): ?>
        <div class="entry excerpt entry-summary">
            <?php the_excerpt(); ?>
        </div><!--/.entry-->
        <?php endif; ?>


    </div><!--/.post-inner-->
</article><!--/.post-->

Alles anzeigen

Aber vielleicht war das auch der richtige Lösungsweg.

Grüß Euch

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Schwarz-Weiß bzw. Graufilter Effekt klappt nicht nach meinen Wünschen

Jetzt mitmachen!

Benutzer online in diesem Thema