How do I vertically center caption on img hover?

Question

I am currently having problems centering my caption inside a div upon hover. The image inside the div is bigger than the div and I want the caption to be vertically centered inside that div?

HTML

<div class="container-fluid">

    <div id="page">

<!-- GRID ITEM -->
        <div class="item s1">
            <a href="#">
                <div class="grid-image">
                    <img         src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Pleiades_large.jpg/1024px-Pleiades_large.jpg">
                </div>
                <div class="item-caption">
                    <h5>I want this to be center</h5>
                </div>
            </a>
        </div>
<!-- /GRID ITEM -->

    </div>
</div>

CSS

#page .item {
    width: calc(16.66% - 10px);
    display: inline-block;
    height: 0;
    float: left;
    padding-bottom: 16.66%;
    overflow: hidden;
    background-color: salmon;
    margin: 5px;
    position: relative;
}

#page .item.s1 {
    width: calc(50% - 10px);
    padding-bottom: 50%;
    overflow: hidden;
    background-color: navy;
}

.item > a {
    position: relative;
    display: block;
    overflow: hidden;
    color: white;
}
.item:hover .grid-image:after {
    background: rgba(0, 0, 0, .7);
}
.item:hover .grid-image > img {
    -webkit-transform: scale(1.1);
       -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
         -o-transform: scale(1.1);
            transform: scale(1.1);

}
.item:hover .item-caption {
    opacity: 1;
    z-index: 3;
  visibility: visible;

}
.item-caption,
.grid-image > img,
.grid-image:after {
    -webkit-transition: all 0.3s ease-in-out 0s;
       -moz-transition: all 0.3s ease-in-out 0s;
        -ms-transition: all 0.3s ease-in-out 0s;
         -o-transition: all 0.3s ease-in-out 0s;
            transition: all 0.3s ease-in-out 0s;
}
.item-caption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(29, 106, 154, 0.72);
  color: #fff;
  visibility: hidden;
  text-align: center;
  opacity: 0;
}



.grid-image {
    position: relative;
    overflow: hidden;
}

.grid-image img {
    display: block;
    overflow: hidden;
}

.grid-image:after {
    position: absolute;
    display: block;
    content: "";
  height: 100%;
  width: 100%;
    top: 0;
    left: 0;
}

JavaScript

var $container = $('#page');
$container.masonry({
columnWidth: '.grid-sizer',
itemSelector: '.item',
percentPosition: true,
gutter: 10
});

Here's a fiddle

Thank you!

Refer : http://stackoverflow.com/questions/2939914/vertically-align-text-in-a-div — Airwind711, Nov 13 '15 at 02:36
Thanks. Yeah i saw that previously but I still had problems. — rool, Nov 13 '15 at 02:45

score 2 · Accepted Answer · answered Nov 13 '15 at 02:41

2

try this: http://jsfiddle.net/2stywe2t/1/

What I did:

Add a new div to your HTML, right under .item-caption.
Gave .item-caption the display: table attribute and a few others
Gave the new div display: table-cell, and vertical-align: middle
Removed position:relative from the a ancestor

Make sense?

answered Nov 13 '15 at 02:41

xyhhx

6,384
6
41
64

Interesting. Thanks! Just a question.. when would you normally use table-cell? – rool Nov 13 '15 at 02:46
`display: table` and `display: table-cell` are used for mimicking the behaviour of a table. So that's an obvious use case. In my experience, it works great for vertically aligning content as well when you can't guarantee the dimensions of an element – xyhhx Nov 13 '15 at 02:47
hello martin when I used the codes that you helped me.. its not centered in safari browser. Is there a solution to this? I tried looking around but I can't seem to get a solution. :s – rool Nov 18 '15 at 09:28

Jinu Kurian · Answer 2 · 2015-11-13T02:58:51.120

Got the answer !! Just tidy up your code a bit.

var $container = $('#page');
$container.masonry({
    columnWidth: '.grid-sizer',
    itemSelector: '.item',
    percentPosition: true,
    gutter: 10
});

#page .item {
    width: calc(16.66% - 10px);
    display: inline-block;
    height: 0;
    float: left;
    padding-bottom: 16.66%;
    overflow: hidden;
    background-color: salmon;
    margin: 5px;
    position: relative;
}
#page .item.s1 {
    width: calc(50% - 10px);
    padding-bottom: 50%;
    overflow: hidden;
    background-color: navy;
    position: relative!important;
}
.item > a {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: white;
}
.item:hover .grid-image:after {
    background: rgba(0, 0, 0, .7);
}
.item:hover .grid-image > img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}
.item:hover .item-caption {
    opacity: 1;
    z-index: 3;
    visibility: visible;
}
.item-caption, .grid-image > img, .grid-image:after {
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}
.item-caption {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(29, 106, 154, 0.72);
    color: #fff;
    visibility: hidden;
    text-align: center;
    opacity: 0;
    display: table;
    height: 100%;
    width: 100%;
}
.grid-image {
    position: relative;
    overflow: hidden;
}
.grid-image img {
    display: block;
    overflow: hidden;
}
.grid-image:after {
    position: absolute;
    display: block;
    content:"";
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}
h5 {
    display: table-cell;
    vertical-align: middle;
}

<div class="container-fluid">
    <div id="page">
        <!-- GRID ITEM -->
        <div class="item s1"> <a href="#">
                <div class="grid-image">
        <img         src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Pleiades_large.jpg/1024px-Pleiades_large.jpg">
                </div>
                <div class="item-caption">
                    <h5>I want this to be center</h5>
                </div>
            </a>

        </div>
        <!-- /GRID ITEM -->
    </div>
</div>
</body>

</html>

Very similar to my approach, but instead you add `display:table-cell` to the `h5` directly. Smart, but maybe not scalable (in the event that OP wants to add both title and description, for example) — xyhhx, Nov 13 '15 at 02:55
yeah. your approach is better. I didn't wanted to add extra markup to the code. :) — Jinu Kurian, Nov 13 '15 at 03:01
Thanks guys! You have been very helpful! Learnt a lot! Cheers! — rool, Nov 13 '15 at 13:19

score 1 · Answer 3 · answered Nov 13 '15 at 03:16

1

You simply need to add one line of code to your CSS to make this work:

h5 { 
    margin-top: 50%;
    transform: translateY(-50%); /* not entirely necessary, but makes centering precise */
}

DEMO: http://jsfiddle.net/2stywe2t/4/

answered Nov 13 '15 at 03:16

Michael Benjamin

346,931
104
581
701

How do I vertically center caption on img hover?

3 Answers3