带有文字叠加的自适应图像

Question

I am trying to make a grid where the images have an overlay on hover, containing text.

However, I can't seem to do this AND have responsive issues.

I've tried removing the fixed heights but this just causes the grids to loose their sizing all together. I have tried tables and absolute positioning without any joy.

Test site is here.

The markup is:

<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;
}

Answer 1

maybe you could rethink your html structure about links and images, and play with absolute positionning for either image or title.

example:

 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; } 

 <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> 

Answer 2

Hope this works for you!

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;
}

Your outer would be of coarse your article tag

Answer 3

Here is an example layout, based on your example, which includes overlapping text on hover of an image.

The <figure> element seems good for this. It needs an image and a <figcaption> . Let's wrap it in an anchor tag so the entire image is clickable:

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

The CSS

• The anchor element can line up the images. The width is 33.33% so that there are 3 images to a row. The images can be spaced with some padding here as well:

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

• The figure is made position: relative so that the position: absolute figcaption is positioned relative to it. This will ensure that the text is layered over the image. We can center it vertically with top: 50% and the transform to offset it correctly:

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

• The image takes up the entire width of its parent:

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

Full example

 *, *: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; } 

 <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> 

Text size: The text can be made to re-size to suit the image width using vw as a font-size .

Image size: Place a min width on the body so that the images don't get too small.

Overlay background: This is provided with the figure:before element.

Note: The <a> elements have no whitespace between them, this prevents an inline gap. The box-sizing: border-box incorporates padding and borders into the width and height calculation.