Images size and mouse hover

Question

in this page http://demos.roxiwd.com/index.php/ar/kgar

How to show images normal like the next row and how to show the words once the mouse hover any point on image not the word area.

Answer 1

img:hover .words {
 display: block;
}

Answer 2

The biggest problem is that you have a dynamic column width and a fixed height on your image containers (with background-size set to 100% 100%). This results in deformed images. You say you want to change that on hover. To do so, you first need to reset the height of this container:

.uc_animated_border_banner:hover .uc_animated_border_bg {height: auto!important;}

Next you should use the padding trick to set the (now dynamic) height equal to the aspect ratio. The aspect ratio of the image is 450px/350px = 1.29. This equals to 129% padding-bottom. Correct this for the line-height of the element that actually takes up verticale space in the box (the h2, with a height of 30px) and you end up with 129% - 30px for the padding-bottom. Split this for equal padding top and bottom, and you end up with 64.5% - 15px padding on both top and bottom of the h2 element. This results in a box with an exact aspect ratio of 1.29 (as long as the h2 fits on a single line).

.uc_animated_border_banner:hover .uc_animated_border_banner .uc_content_box h2 {
  padding-top: calc(64.5% - 15px)!important;
  padding-bottom: calc(64.5% - 15px)!important;
}

TIP: Use position: absolute on the h2 for a solution without the 15px/30px and single-line constraint.

---

Although this works I would chose for a more simple solution. Find the inline CSS statement at line 214:

.uc_animated_border_bg {background-size: 100% 100%!important;}

... and replace it with:

.uc_animated_border_bg {background-size: cover!important;}

I think the result looks better and the solution is much simpler. This alternative solution works for any image (irrespective of their aspect ratio). The only down-side is that an unknown amount of the image is invisible/cut off.