Question

我正在尝试创建一个投资组合页面，其中显示了我的设计项目的图像，每个图像都是指向项目页面的链接。

该页面是两列响应式布局。悬停时，项目的标题会显示在图像的顶部。

我的问题是，为了让项目的标题出现在图像上，我必须绝对定位它。这意味着现在我无法将其置于框架内。我有什么想法可以做到这一点？我可以给它一个百分比，但它会在调整大小时改变它的位置......

这是我的代码：

<div class="img">
  <a title="<?=$title?>" href="<?=$site[0]?>">
   <?php the_post_thumbnail(); ?>
  </a>
 <span class="itemTitle"><?php the_title(); ?></span>
</div>

这是我的css：

.img {
    position: relative;
}

.img span { 
    visibility: hidden; 
    pointer-events: none;
}

.img:hover span { 
    visibility: visible; 
    transition: 0.1s;   
    -webkit-transition: 0.1s;
}

.itemTitle {
    position: absolute;
    top: 42%;
    text-transform: uppercase;
    font-size:40px;
    font-family: 'Verlag A', 'Verlag B'; font-weight: 800; font-style: normal;
    text-align: center;
}

这是我正在处理的网页的链接： http://www.fredericdesign.net/newsite/work/

Answer 1

这样做：

.itemTitle {
    font-family: 'Verlag A','Verlag B';
    font-size: 40px;
    font-style: normal;
    font-weight: 800;
    position: absolute;
    text-transform: uppercase;
    top: 42%;
    /*new*/
    right: 0;
    left: 0;
    text-align: center;
}

在响应式布局中居中Wordpress帖子标题

1 个答案: