Как добавить текст при наведении курсора на эскизы изображений в WordPress?

Question

Как добавить текст при наведении курсора на эскизы изображений в WordPress?

Я использую тему 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>

Как я могу интегрировать это так, чтобы он отображал соответствующий заголовок сообщения для каждого эскиза?

—————ОБНОВИТЬ—————
Пользуясь ответом 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>

0

hover image overlay php wordpress

Решение

Другие решения

Большинство браузеров будут отображать заголовок изображения при наведении курсора. Предполагая, что ваша тема добавляет заголовок к коду (HTML будет выглядеть примерно так: <img src='image.jpg' title='my great image' />) тогда все, что вам нужно, это просмотреть изображения в вашей медиатеке и убедиться, что поле заголовка заполнено.

надеюсь, это поможет

0

Источник

Accepted Answer

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>

0