我正在使用Wordpress主题"照片">
它使用特色图像为主页上的帖子生成缩略图。悬停时缩略图会淡出，但不显示帖子标题。http://www.hardeepasrani.com/demo/photos/
.photogrid-item img.featured-image:hover {
opacity: 0.2;
}
我在网上发现了许多wordpress插件和许多如何完成缩略图悬停标题的示例，但是wordpress插件会影响帖子随附的功能图像而不是主页上的缩略图，并且在线示例是简单的html/css，而我相信这个主题需要我将其放在内容.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>
如何集成它，以便它在每个缩略图上显示相应的帖子标题？
--------------更新--------------- 使用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>
Could You Please try Following code with the css.You change the css with your own needs.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.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>
</head>
<body>
<div class="container">
<a href="<?php the_permalink(); ?>">
<?php if ( has_post_thumbnail() ) : ?>
<?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
<img alt="Avatar" class="image"> src="<?php echo $feat_image; ?>" />
<?php else: ?>
<?php $feat_image = get_stylesheet_directory_uri() . '/assets/images/default.jpg'; ?>
<img alt="Avatar" class="image">src="<?php echo $feat_image; ?>" />
<?php endif; ?>
<div class="overlay">
<div class="text"><?php the_title(); ?></div>
</div>
</a>
</div>
</body>
</html>
大多数浏览器会在悬停时显示图像标题。假设您的主题将标题添加到代码中(HTML 看起来像<img src='image.jpg' title='my great image' />)，那么您所需要做的就是浏览媒体库中的图像并确保填写标题字段。
希望有帮助