Наведите текст на изображение поста в WordPress

Я уже несколько дней пытаюсь найти хорошее, простое решение для этого, и я подхожу с пустыми руками.

Я пытаюсь сделать блог в WordPress, который в настоящее время имеет отрывок с изображениями на первой странице. Изображения не являются рекомендуемыми изображениями, и они ссылаются на полный пост. То, что я действительно хочу, чтобы "читать дальше" появлялось, когда я наводил курсор мыши на изображение поста на первой странице.

В идеале, я хотел бы реализовать один из этих эффектов при наведении codrops ( http://tympanus.net/Development/HoverEffectIdeas/) на изображения постов, если это возможно. Я очень новичок в WordPress, так что я не знаю, куда поместить код.

Но любая помощь будет принята с благодарностью.

Источник

2 ответа

Решение

Попробуйте ниже основной код HTML и CSS:

<style type="text/css">
div.texthover 
{   
    display:block;
    position:relative; 
    width:150px;
}

div.texthover .overlay 
{
    position:absolute;
    top:45%;
    width:100;
    width:150px;       
    background-color:rgba(0, 0, 0, 0.3);
    display:none;width:150px;
}
div.texthover:hover .overlay 
{
    display:block;
}
</style>


<div class="texthover"><br />
    <img src="image.jpg" width="150" height="150" />
<div class="overlay"><br />
    <span>This is some text I want to display</span>
</div>
</div>
Источник

В WordPress зайдите в Внешний вид -> Редактор и отредактируйте style.css или ваш основной файл темы.css. Вы можете поместить туда свой код при наведении. Вам также необходимо добавить соответствующие классы для вашего изображения. Однако, если вы хотите, чтобы "read more" появилось, вам понадобится существующий связанный HTML-код. С другой стороны, у вас есть несколько доступных плагинов для наведения, я нашел их с помощью быстрого поиска: https://wordpress.org/plugins/amazing-hover-effects/ Удачи.

Источник
Другие вопросы по тегам