Question: I know how to put text on hover on an image if the height and the width is fixed. but I have a responsive slider (owl-slider) and want to add link (easy - yeah.) and a blue overlay with white text in it and a simple fading/sliding transition from the overlay.

The problem is: every item changes its height and width on resizing. I could write several media queries, but I'm quite sure there must be a simpler solution to that problem.

I have a very simple markup:

```
<div>
 <a href="#">
  <img src="http://placehold.it/360x100">
  <div class="overlay">Click here for more Infomartion</div>
 </a>
</div>

```

Normally I would go for pure css method with setting height and width from .overlay to the image size and set visibility on hover. But.. that won't work, because the width & height will differ from viewport to viewport. So, what would you suggest?

Answer: 
The trick involves setting `position: relative` to the parent container `.image-container` which contains the image. Using `display: inline-block` will force the parent container to shrink-to-fit the image.

You then apply `position:absolute` to the child container (overlay) `.hover-text` and set all the offsets (`left`, `right`, `top` and `bottom`) to zero, which will force the overlay to match the size of the image.

If you want to vertically center the text, you need to add two nested blocks.
One way of doing it is to repurpose the `a` element using `display: table` with width and height of 100%, and then apply `display: table-cell` to the nested `div` with `vertical-align: middle`. This will center the text vertically if so desired.

I added a transition effect to demonstrate how to set it up. You can
adjust the details as you like for duration and transition type.

Ref: <http://www.w3.org/TR/css3-transitions/>

You could also do a translation using a CSS transform, which is also feasible since the modern browsers support transforms (especially in 2D).

```css
.image-container {
  position: relative;
  display: inline-block;
}
.image-container .hover-text {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 255, 0.5);
  opacity: 0;
  transition: opacity;
}
.hover-text a {
  display: table;
  height: 100%;
  width: 100%;
  text-decoration: none;
}
.hover-text a div {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: 3.0em;
  color: white;
}
.image-container img {
  vertical-align: top; /* fixes white space due to baseline alignment */
}
.image-container:hover .hover-text {
  opacity: 1;
  transition-duration: 1s;
  transition-timing-function: linear;
}
```

```html
<div class="image-container">
  <img src="http://placehold.it/360x100">
  <div class="hover-text">
    <a href="#">
      <div>Text on hover</div>
    </a>
  </div>
</div>
```
Try this, it doesn't care about the image size

```css
.image-container{
    position: relative;
    display: inline-block;
}
.image-container .hover-text{
    position: absolute;
    top: 33%;
    width: 100%;

    text-align: center;
    visibility: hidden;
}

.image-container:hover .hover-text{
    visibility: visible;
}

/* styling */
.hover-text{
    font-family: sans-serif;
    color: white;
    background: rgba(0,0,0,0.3);
    text-shadow: 1px 1px 1px black;

    padding-top: 0.5em;
    padding-bottom: 0.5em;
}
.hover-text a{
    color: white;
}
```

```html
<div class="image-container">
    <img src="http://placehold.it/360x100">
    <div class="hover-text">
        Text on hover <a href="#">Link</a> 
    </div>
</div>
```