响应图像与文本覆盖

时间：2016-02-10 21:10:31

标签： html css

我正在尝试创建一个网格，其中图像在悬停时包含文本。

但是，我似乎无法做到这一点并且有响应问题。

我试过去掉固定的高度，但这只会导致网格一起松开它们的尺寸。我没有任何快乐地试过桌子和绝对定位。

测试网站为here.

标记是：

<div class="work-item clickable">

    <a href="http://localhost:8888/work-example-client-name-11/"></a>

    <div class="front">
        <img width="460" height="380" src="http://localhost:8888/wp-content/uploads/2016/02/stock-photo-4772348-1500x1000-460x380.jpg" class="attachment-work-featured-image size-work-featured-image" alt="stock-photo-4772348-1500x1000" />
    </div>

    <div class="back">
        <div class="inner">
            <h3>Lorem ipsum dolor sit amet</h3>
        </div>
    </div>

</div>

CSS：

section#homepage .content article .work-item {
    cursor: pointer;
     border-right: 20px solid #fff;
     border-bottom: 20px solid #fff;
     float: left;
     overflow: hidden;
     position: relative;
    width: 33.33%;
}

section#homepage .content article .work-item .front {
    color: #fff;
    width: 100%;
    z-index: 50;
    opacity: 1;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}

section#homepage .content article .work-item .back {
    display: table;
    width: 100%;
    opacity: 0;
    z-index: 25;
    position: absolute;
}

section#homepage .content article .work-item .back .inner {
    display: table-cell;
    padding: 20px;
    vertical-align: middle;
}

3 个答案:

答案 0 :(得分：0)

也许您可以重新考虑关于链接和图像的html结构，并使用图像或标题的绝对位置。

示例：

＆＃13;
＆＃13; 
body {
  text-align: center;
}

.work-item {
  display: inline-block;
  vertical-align: top;
  width: 25%;
  margin: 1em;
}

a {
  display: inline-table;
  border: solid;
  width: 100%;
  color: black;
  text-decoration: none;
}

figure {
  position: relative;
  display: table-row;
}

figure img {
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
  transition: 0.5s
}

figcaption:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 0;
  padding-top: 92%;
}

figcaption {
  display: table-cell;
}

figure:hover img {
  opacity: 0;
}

figcaption h3 {
  display: inline-block;
  max-width: 98%;
  margin: 0 -2%;
  vertical-align: middle;
}
＆＃13; 
<div class="work-item clickable">
  <a href="http://dev.charlyanderson.co.uk/Testing/work-example-client-name-12/">
    <figure>
      <img width="460" height="380" src="http://dev.charlyanderson.co.uk/Testing/wp-content/uploads/2016/02/stock-photo-4772348-1500x1000-460x380.jpg" class="attachment-work-featured-image size-work-featured-image" alt="stock-photo-4772348-1500x1000" />
      <figcaption>
        <h3>Lorem ipsum dolor sit amet</h3>
      </figcaption>
      </figure>
  </a>
</div>
<div class="work-item clickable">
  <a href="http://dev.charlyanderson.co.uk/Testing/work-example-client-name-12/">
    <figure>
      <img   src="http://dev.charlyanderson.co.uk/Testing/wp-content/uploads/2016/02/stock-photo-4772348-1500x1000-460x380.jpg" class="attachment-work-featured-image size-work-featured-image" alt="stock-photo-4772348-1500x1000" />
      <figcaption>
        <h3>Lorem ipsum dolor sit amet</h3>
      </figcaption>
      </figure>
  </a>
</div>
<div class="work-item clickable">
  <a href="http://dev.charlyanderson.co.uk/Testing/work-example-client-name-12/">
    <figure>
      <img width="460" height="380" src="http://dev.charlyanderson.co.uk/Testing/wp-content/uploads/2016/02/stock-photo-4772348-1500x1000-460x380.jpg" class="attachment-work-featured-image size-work-featured-image" alt="stock-photo-4772348-1500x1000" />
      <figcaption>
        <h3>Lorem ipsum dolor sit amet</h3>
      </figcaption>
      </figure>
  </a>
</div>
<div class="work-item clickable">
  <a href="http://dev.charlyanderson.co.uk/Testing/work-example-client-name-12/">
    <figure>
      <img width="460" height="380" src="http://dev.charlyanderson.co.uk/Testing/wp-content/uploads/2016/02/stock-photo-4772348-1500x1000-460x380.jpg" class="attachment-work-featured-image size-work-featured-image" alt="stock-photo-4772348-1500x1000" />
      <figcaption>
        <h3>Lorem ipsum dolor sit amet</h3>
      </figcaption>
      </figure>
  </a>
</div>
</div>
<div class="work-item clickable">
  <a href="http://dev.charlyanderson.co.uk/Testing/work-example-client-name-12/">
    <figure>
      <img   src="http://dev.charlyanderson.co.uk/Testing/wp-content/uploads/2016/02/stock-photo-4772348-1500x1000-460x380.jpg" class="attachment-work-featured-image size-work-featured-image" alt="stock-photo-4772348-1500x1000" />
      <figcaption>
        <h3>Lorem ipsum dolor sit amet</h3>
      </figcaption>
      </figure>
  </a>
</div>
<div class="work-item clickable">
  <a href="http://dev.charlyanderson.co.uk/Testing/work-example-client-name-12/">
    <figure>
      <img width="460" height="380" src="http://dev.charlyanderson.co.uk/Testing/wp-content/uploads/2016/02/stock-photo-4772348-1500x1000-460x380.jpg" class="attachment-work-featured-image size-work-featured-image" alt="stock-photo-4772348-1500x1000" />
      <figcaption>
        <h3>Lorem ipsum dolor sit amet</h3>
      </figcaption>
      </figure>
  </a>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

希望这适合你！

jsfiddle

<强> HTML 

<a href="#" class="outer">
  <div class="inner"><img src="http://farm9.staticflickr.com/8311/8023199579_f52f648727_m.jpg"></div>
  <div class="overlay">Text</div>
</a>
<a href="#" class="outer">
  <div class="inner"><img src="http://farm9.staticflickr.com/8311/8023199579_f52f648727_m.jpg"></div>
  <div class="overlay">Text</div>
</a>
<a href="#" class="outer">
  <div class="inner"><img src="http://farm9.staticflickr.com/8311/8023199579_f52f648727_m.jpg"></div>
  <div class="overlay">Text</div>
</a>

<强> CSS 

.outer {
  width: 33.333%;
  overflow: auto;
  float: left;
  position: relative;
}

.outer .inner {
  display: block;
  margin: 10px;
}

.outer .inner img {
  width: 100%;
  height: auto;
  border: 0px;
  display: block;
}

.outer .overlay {
  position: absolute;
  top: 0;
  opacity: 0;
  width:100%;
  height:100%;
  background-color:pink;
  -webkit-transition: opacity .15s ease-in-out;
  -moz-transition: opacity .15s ease-in-out;
  -ms-transition: opacity .15s ease-in-out;
  -o-transition: opacity .15s ease-in-out;
  transition: opacity .15s ease-in-out;
}

.outer:hover .overlay {
  opacity: 0.7;
}

你的文章标签

答案 2 :(得分：0)

以下是基于示例的示例布局，其中包括悬停图像时的重叠文本。

<figure> element似乎对此有好处。它需要一个图像和<figcaption>。让我们将其包装在锚标记中，以便整个图像可以点击：

<a>
    <figure>
        <img />
        <figcaption></figcaption>
    </figure>
</a>

CSS

  • 锚元素可以排列图像。宽度为33.33％，因此连续有3个图像。这里的图像也可以用一些填充间隔：

    a {
  display: inline-block;
  width: 33.33%;
  vertical-align: top;
  padding: 10px;
}

  • 图形为position: relative，以便position: absolute figcaption相对于它定位。这将确保文本在图像上分层。我们可以使用top: 50%垂直居中，并使用变换来正确偏移它：

    figure {
  position: relative; 
}

figcaption {
  position: absolute;
  text-align: center;
  top: 50%;
  right: 0; 
  left: 0;
  transform: translateY(-50%);
}

  • 图像占据其父级的整个宽度：

    figure img {
  width: 100%;
  display: block;
}

完整示例

＆＃13;
＆＃13; 
*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
}
body {
  min-width: 600px;
}
a {
  display: inline-block;
  width: 33.33%;
  vertical-align: top;
  padding: 10px;
}
figure {
  position: relative;
  transition: opacity .2s;
}
figure:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  content: '';
  opacity: 0;
  transition: inherit;
}
figcaption {
  position: absolute;
  text-align: center;
  top: 50%;
  right: 0;
  left: 0;
  transform: translateY(-50%);
  opacity: 0;
  transition: inherit;
}
figcaption h2 {
  font-size: 3vw;
}
figcaption p {
  font-size: 2vw;
}
a {
  color: #FFF;
  text-decoration: none;
}
figure img {
  width: 100%;
  display: block;
}
figure:hover:before,
figure:hover figcaption {
  opacity: 1;
}
＆＃13; 
<a href="http://dev.charlyanderson.co.uk/Testing/work-example-client-name-12/">
  <figure>
    <img src="http://dev.charlyanderson.co.uk/Testing/wp-content/uploads/2016/02/stock-photo-4772348-1500x1000-460x380.jpg" class="attachment-work-featured-image size-work-featured-image" alt="stock-photo-4772348-1500x1000" />
    <figcaption>
      <h2>Lorem ipsum dolor sit amet</h2>
      <p>More text here, plenty of space</p>
    </figcaption>
  </figure>
</a><a href="http://dev.charlyanderson.co.uk/Testing/work-example-client-name-12/">
  <figure>
    <img src="http://dev.charlyanderson.co.uk/Testing/wp-content/uploads/2016/02/stock-photo-4772348-1500x1000-460x380.jpg" class="attachment-work-featured-image size-work-featured-image" alt="stock-photo-4772348-1500x1000" />
    <figcaption>
      <h2>Lorem ipsum dolor sit amet</h2>
      <p>More text here, plenty of space</p>
    </figcaption>
  </figure>
</a><a href="http://dev.charlyanderson.co.uk/Testing/work-example-client-name-12/">
  <figure>
    <img src="http://dev.charlyanderson.co.uk/Testing/wp-content/uploads/2016/02/stock-photo-4772348-1500x1000-460x380.jpg" class="attachment-work-featured-image size-work-featured-image" alt="stock-photo-4772348-1500x1000" />
    <figcaption>
      <h2>Lorem ipsum dolor sit amet</h2>
      <p>More text here, plenty of space</p>
    </figcaption>
  </figure>
</a><a href="http://dev.charlyanderson.co.uk/Testing/work-example-client-name-12/">
  <figure>
    <img src="http://dev.charlyanderson.co.uk/Testing/wp-content/uploads/2016/02/stock-photo-4772348-1500x1000-460x380.jpg" class="attachment-work-featured-image size-work-featured-image" alt="stock-photo-4772348-1500x1000" />
    <figcaption>
      <h2>Lorem ipsum dolor sit amet</h2>
      <p>More text here, plenty of space</p>
    </figcaption>
  </figure>
</a><a href="http://dev.charlyanderson.co.uk/Testing/work-example-client-name-12/">
  <figure>
    <img src="http://dev.charlyanderson.co.uk/Testing/wp-content/uploads/2016/02/stock-photo-4772348-1500x1000-460x380.jpg" class="attachment-work-featured-image size-work-featured-image" alt="stock-photo-4772348-1500x1000" />
    <figcaption>
      <h2>Lorem ipsum dolor sit amet</h2>
      <p>More text here, plenty of space</p>
    </figcaption>
  </figure>
</a><a href="http://dev.charlyanderson.co.uk/Testing/work-example-client-name-12/">
  <figure>
    <img src="http://dev.charlyanderson.co.uk/Testing/wp-content/uploads/2016/02/stock-photo-4772348-1500x1000-460x380.jpg" class="attachment-work-featured-image size-work-featured-image" alt="stock-photo-4772348-1500x1000" />
    <figcaption>
      <h2>Lorem ipsum dolor sit amet</h2>
      <p>More text here, plenty of space</p>
    </figcaption>
  </figure>
</a>
＆＃13;
＆＃13;
＆＃13; 文字大小：可以使用vw作为font-size，使文字重新调整大小以适合图片宽度。

图像尺寸：在身体上放置一个最小宽度，这样图像就不会太小。

叠加背景：这是figure:before元素提供的。

注意： <a>元素之间没有空格，this prevents an inline gap. box-sizing: border-box将填充和边框合并到宽度和高度计算中。

相关问题
最新问题