Question

我正在使用Wordpress主题“照片”

它使用精选图片为主页上的帖子生成缩略图。缩略图在悬停时淡入淡出，但不显示帖子标题。 http://www.hardeepasrani.com/demo/photos/

.photogrid-item img.featured-image:hover {
    opacity: 0.2;
}

我在网上发现了很多关于如何实现缩略图悬停字幕的wordpress插件和大量示例，但是wordpress插件会影响帖子附带的功能图像而不是主页上的缩略图，而在线示例是简单的html / css而不是我相信这个主题需要我把它放在content.php文件中。

<div id="post-<?php the_ID(); ?>" <?php post_class('photogrid-item'); ?>>
  <a class="photogrid-link" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
    <?php if ( has_post_thumbnail() ) : ?>
      <?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
      <img class="featured-image" src="<?php echo $feat_image; ?>" />
    <?php else: ?>
      <?php $feat_image = get_stylesheet_directory_uri() . '/assets/images/default.jpg'; ?>
      <img class="featured-image" src="<?php echo $feat_image; ?>" />
    <?php endif; ?>
  </a>
</div>

w3schools有一个很好的简单示例，但它覆盖了预定义的文本（“Hello World”）https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade

<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

如何整合它以便它会为每个缩略图显示相应的帖子标题？

-------------- UPDATE --------------- 使用developerme的答案，我得到了很多方面。但是，将鼠标悬停在任何缩略图上都会显示所有缩略图的叠加层。出于某种原因，通过编辑

中的CSS来解决这个问题

.container:hover .overlay {
  opacity: 1;
}

为：

.overlay:hover {
  opacity: 1;
}

我不知道为什么，但这似乎可以解决问题。

<style>

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.overlay:hover {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
</style>


        <div id="post-<?php the_ID(); ?>" <?php post_class('photogrid-item'); ?>>
            <a class="photogrid-link" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
            <?php if ( has_post_thumbnail() ) : ?>
                <?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
                <img class="featured-image" src="<?php echo $feat_image; ?>" />
                    <div class="overlay">
                        <div class="text"><?php the_title(); ?></div>
                    </div>
            <?php else: ?>
                <?php $feat_image = get_stylesheet_directory_uri() . '/assets/images/default.jpg'; ?>
                <img class="featured-image" src="<?php echo $feat_image; ?>" />
            <?php endif; ?>
            </a>
        </div>

Answer 1

大多数浏览器会在悬停时显示图片标题。假设您的主题将标题添加到代码中（HTML看起来像100 10 0.0 ( 24) 0.0 ( 28) 100 100 0.1 ( 1800) 0.0 ( 3880) 100 1000 43.3 ( 470675) 15.3 (2426774) 1000 10 0.1 ( 11) 0.6 ( 2) 1000 100 0.2 ( 452) 0.0 ( 704) 1000 1000 33.5 ( 35448) 0.8 ( 68896) 10000 10 0.1 ( 10) 0.0 ( 0) 10000 100 2.6 ( 100) 0.0 ( 0) 10000 1000 180.8 ( 1000) 0.0 ( 0)），那么您需要的只是浏览媒体库中的图像并确保填写标题字段。< / p>

希望有所帮助

如何将鼠标悬停文本添加到Wordpress精选图像缩略图？

2 个答案: