php - Fix hover images blink

admin管理员组

文章数量:1122832

I have this css script generated using php, it's used to show a wordpress second featured image when an user hover. The problem is that the images are blinking and I don't know how to solve this small issue. Can anyone suggest a fix for this? I've implemented the lazyload, but on this case it's unuseful.

<div class="box">
      <?php $id = get_the_ID(); ?>
      <div class="rounded-circle" style="background-image:url('<?php the_post_thumbnail_url('full'); ?>')" id="staff-pic-<?php echo $id; ?>"></div>
      <?php if(class_exists('MultiPostThumbnails')):
            $hover_pic = MultiPostThumbnails::get_post_thumbnail_url(get_post_type(),'secondary-image');
            endif;
            echo
            '<style>
                #staff-pic-'.$id.'{
                background-size: cover;
                background-position: center;
                margin: auto;
                transition: all 300ms;
              }
              #staff-pic-'.$id.':hover{
                transition: all 300ms;
                background-image:url("'.$hover_pic.'") !important;
                background-size: cover;
                background-position: center;
                margin: auto;
              }
            </style>';
      ?>
        <h3 class="text-center team-name"><?php the_title(); ?></h3>
        <p class="description text-center"><?php the_content(); ?></p>
    </div>

I have this css script generated using php, it's used to show a wordpress second featured image when an user hover. The problem is that the images are blinking and I don't know how to solve this small issue. Can anyone suggest a fix for this? I've implemented the lazyload, but on this case it's unuseful.

<div class="box">
      <?php $id = get_the_ID(); ?>
      <div class="rounded-circle" style="background-image:url('<?php the_post_thumbnail_url('full'); ?>')" id="staff-pic-<?php echo $id; ?>"></div>
      <?php if(class_exists('MultiPostThumbnails')):
            $hover_pic = MultiPostThumbnails::get_post_thumbnail_url(get_post_type(),'secondary-image');
            endif;
            echo
            '<style>
                #staff-pic-'.$id.'{
                background-size: cover;
                background-position: center;
                margin: auto;
                transition: all 300ms;
              }
              #staff-pic-'.$id.':hover{
                transition: all 300ms;
                background-image:url("'.$hover_pic.'") !important;
                background-size: cover;
                background-position: center;
                margin: auto;
              }
            </style>';
      ?>
        <h3 class="text-center team-name"><?php the_title(); ?></h3>
        <p class="description text-center"><?php the_content(); ?></p>
    </div>

• php
• theme-development
• css

Share Improve this question asked Mar 5, 2019 at 11:19 ZWPDevZWPDev 11622 silver badges1616 bronze badges 2

• Can you please share a website URL here so I can help you. – Tanmay Patel Commented Mar 5, 2019 at 11:25
• It's on my localhost for the moment. the blink is caused because the hover image is not preloaded. I can't reply the issue with a fiddle, but I'm searching a way to preload the hover image. As you can see from the code, the hover image is loaded using php and dynamic CSS when the wordpress page load. – ZWPDev Commented Mar 5, 2019 at 13:59

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

My suggestion is to get around using background-image, and load both images at the same time. This should prevent the flash of the hover image loading on the first hover. If the images are loaded as images instead of background images, then you can use CSS to set the opacity of the hover image to 0 and then just make opacity 1 on hover. By using position absolute for the images, they should lay on top of each other.

<div class="box">
    <?php $id = get_the_ID(); ?>
    <div class="rounded-circle staff-pic" id="staff-pic-<?php echo $id; ?>">
        <img src="<?php the_post_thumbnail_url('full'); ?>" alt="<?php echo $id;?>" class="initial-image">
        <?php if(class_exists('MultiPostThumbnails')):
            $hover_pic = MultiPostThumbnails::get_post_thumbnail_url(get_post_type(),'secondary-image');?>
            <img src="<?php echo $hover_pic;?>" class="hover-pic">
        <?php endif; ?>
    </div>
    <h3 class="text-center team-name">
        <?php the_title(); ?>
    </h3>
    <p class="description text-center">
        <?php the_content(); ?>
    </p>
</div>

With the following CSS:

.rounded-circle.staff-pic {
    position: relative;
}
.initial-image {
    position: absolute;
    top:0;
    left:0;
    z-index: 1;
}
.hover-pic {
    position: absolute;
    top:0;
    left:0;
    opacity: 0;
    z-index: 2
}
.rounded-circle.staff-pic::hover .hover-pic {
    opacity: 1;
    transition: all 300ms;
}

You may need to make some minor tweaks to the css, but without actually seeing your layout, this should be a good start.

本文标签： phpFix hover images blink