Есть у меня вот такое решение:
<article>
<div class="imgteaser">
<?php if ( has_post_thumbnail()) { ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" ><?php the_post_thumbnail('post-thumbnail'); ?></a>
<?php } ?>
<figcaption>
<strong><h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2></strong>
<?php the_excerpt() ?>
</figcaption>
</div>
</article>
.imgteaser { /* общий блок */
position: relative;
display: table;
margin: 0 auto;
line-height: 0;
color: rgb(223,223,223);
cursor: pointer;
}
.imgteaser:after { /* "подробнее" */
content: "подробнее \bb";
position: absolute;
right: 10px;
bottom: 10px;
padding: 5px 10px;
background: rgba(17,34,51,.6);
line-height: 1.6em;
}
.imgteaser:hover:after {content: none;}
.imgteaser figcaption {display: none;}
.imgteaser:hover figcaption { /* прозрачная область */
display: block;
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
padding: 5px 10px;
background: rgba(68,85,102,.7);
font-size: 80%;
line-height: 1.3em;
}
.imgteaser:hover figcaption strong { /* заголовок */
display: block;
line-height: 2em;
font-size: 110%;
}
Вот скриншот:
А так при наведении:
Собственно, хотелось бы, чтобы было не "подробнее", а заголовок. Может кто-то помочь подправить css? Или если нельзя на css, то может кто-то помочь скриптом?