0

I'm trying to make a row of blocks with background images and centered text overlay them. I want to maintain aspect ratio (16:9) and keep the text vertically centered. Is there any way to do this? I don't want to use background-image and background-size: cover; because I'm animating the background on hover. I know that'd be much easier ... but it's no fun doing easy things.

This is what I have so far: http://jsbin.com/kezid/1/edit

zebapy
  • 643
  • 1
  • 5
  • 21
  • Why exactly don't you want to use a background-image? The image is clearly styling (it serves as a background), so does not belong in your content but in your css. That should be your first rule, not what is easy or not. And backgrounds can be animated just as well... – Pevara May 05 '14 at 18:26
  • can you animate opacity on background? And the image will actually be related to the content. – zebapy May 05 '14 at 18:28
  • I solved it with this. http://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element – zebapy May 07 '14 at 19:19

0 Answers0