Thumbnail hover caption centered with padding/margin?

Question

I want to create a white hover caption that is centered vertical and horizontal. Around that i would like to add the same padding/margin and within some padding/margin with the title/caption centered, horizontal and vertical.

Because everything is responsive i think is best to use % for the most of the elements. Maybe the structure of the thumbnail/caption (html) needs to be written differently, i'm a bit stuck now.

In the example image i added some red marks what i mean.

Example:

Thumbnail hover example

---> FIDDLE

    <div class="col-4">
    <a class="thumb" href="#">
        <img src="http://fakeimg.pl/500x330/ccc/">
        <div class="caption"><span>Project title centered vertical and horizontal</span></div>
    </a>
    </div>

Perhaps the question [How to center an element horizontally and vertically?](http://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically) might help. — Josh Crozier, Feb 17 '15 at 15:09
thanks Josh, looks like the first option don't need so much code. Browser support for transform: translateX(-50%) translateY(-50%); is good enough? — KP83, Feb 17 '15 at 15:54

score 1 · Answer 1 · answered Feb 17 '15 at 15:12

1

One option can be the use of inline-block on the span element to vertical algin, and for the space use padding and box-sizing on caption. Check this:

.caption {
  position: absolute;
  width: 80%; 
  height: 80%;
  top: 10%; 
  left: 10%;
  background-color: white;
  text-align: center;
  opacity: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  box-sizing:border-box;
  padding:5px;
}
.caption span {
  display: inline-block;
  opacity: 0;
  vertical-align:middle;
  color: #111;
  text-transform: uppercase;
  letter-spacing: 1px;
  background-color: white;
}
.caption:before {
    content:" ";
    height:100%;
    width:0;
    display:inline-block;
    vertical-align:middle;
}

DemoFiddle

answered Feb 17 '15 at 15:12

DaniP

37,813
8
65
74

thanks for helping, but what about the padding/margin around the white square top/bottom/lef/right the same size and padding within the white square so the title doesn't go all the way to the end? – KP83 Feb 17 '15 at 15:18
@Foroloca using padding and box-sizing on parent : https://jsfiddle.net/bh14xdwr/7/ – DaniP Feb 17 '15 at 15:20
ok do you know same sizing around the white square now the padding/margin of the top and bottom is smaller than right and left. – KP83 Feb 17 '15 at 15:23
@Foroloca will be tricky since the space of left and top is relative to the height and width and those values are just different....but if the proportion of the image is always that you can change the values to fit that : https://jsfiddle.net/bh14xdwr/8/ – DaniP Feb 17 '15 at 15:30
image proportion is always the same, weird that so simple thing it must be so difficult to code. So the padding/margin around can't be a same value like 20px or 5% etc instead of a calculate trick 72% etc. ? – KP83 Feb 17 '15 at 15:39
@Foroloca using `calc` can make it easier to make the space around with px https://jsfiddle.net/bh14xdwr/9/ – DaniP Feb 17 '15 at 15:58

score 0 · Answer 2 · answered Feb 17 '15 at 15:14

0

Check this fiddle.

Display the parent as a table-cell and use vertical align to center everything

.block {
   background-color: #eee;
   min-height: 200px;
   display: table-cell;
   vertical-align: center;
   text-align: center;
}
.block-contents {
   background-color: #fff;
   padding: 20px;
   margin: 20px;
}

answered Feb 17 '15 at 15:14

Jackson

3,476
1
19
29

thanks, but can you see this working within the structure of what i have, because it doesn't work if i use it like this. – KP83 Feb 17 '15 at 15:29

score 0 · Answer 3 · answered Feb 17 '15 at 15:15

You could always position the span absolutely too.

.caption span {
    display: block;
    position: absolute;
    top:50%;
    left:50%;
    width:100%;
    transform: translate(-50%, -50%);
    color: #111;
    text-transform: uppercase;
    letter-spacing: 1px;
    background-color: white;

}

JSfiddle Demo

Thumbnail hover caption centered with padding/margin?

3 Answers3

DemoFiddle