How to put text over img on hover - width and height are variable


Tags: html,css,css3,css-transitions

Problem :

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?



Solution :

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

.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;
}
<div class="image-container">
  <img src="http://placehold.it/360x100">
  <div class="hover-text">
    <a href="#">
      <div>Text on hover</div>
    </a>
  </div>
</div>


    CSS Howto..

    How to place scroll bar on side of table?

    How to change the background-color of jumbrotron?

    How to center this stuff inside a link using CSS?

    How do I line up CSS elements? Is there a tool I can use?

    How to put four images 2x2 on other image as background, CSS?

    How to make last element in a series of wrapped inline-block elements fill the available horizontal space?

    How can I do html multi elements list with type attribute?

    How to change the mouse pointer?

    How to use Vendor Properties in Multiple Backgrounds?

    How to wrap text in a element in IE

    How to fit elements in 100% width without absolute positioning?

    How to inject a css class into an MvcHtmlString?

    How to close a modal box after form submit?

    How to remove the bottom border of a box with CSS

    CSS issue - How to Prevent Floating Objects from Wrapping in a Container, without changing size of container?

    How to place a div on right side of cascading tables - CSS

    Disappearing div using JQuery - how do I stop it from reloading next time a page is opened

    Bold text not showing on iPhone but displays fine on Android

    how to set word break in table th or td, when column and table-layout auto using CSS

    How do I place a DIV class in a specific position over another DIV class?

    Jquery how to set active link css color

    How to align with digits inside to the right, jQuery

    How to change the Fill color of an SVG path via CSS

    How to fix clipped text over 3D transform image on Safari?

    How to hover mutiple “div” in the same time?

    How to reverse font percentages

    How to apply CSS style to a Sibling Label field of a Div?

    How to make an image not overlap navigation bar in CSS/HTML [closed]

    How to add bold text with CSS? [duplicate]

    HTML/JavaScript - How can I hide the links and cursor?