CODEWITHSUNDEEP
htmlcssimagewebkithover
user3143926
user3143926

Reputation: 13

Can not center text on image hover

I am setting up a new homepage for my website. It will have a 2x2 grid of four images that change size with the window and they'll all have a hover text. I was able to do everything so far but I got stuck at one point, which possibly have an easy answer that I can't find. When I hover over the image, I want to make the text centered, no matter what the size of the window is. But I can not find the proper way to do it. The methods I've tried either don't center it both vertically and horizontally or the text goes off center when I resize the window. Any help would be appreciated. Thank you!

Here's my code: jsfiddle

HTML

<section id="photos">
    <a href="/portfolio/test1.shtml" class="darken"><img src="image1"><span>GALLERY ONE</span></a>
    <a href="/portfolio/test2.shtml" class="darken"><img src="image2"><span>GALLERY TWO</span></a>
    <a href="/portfolio/test3.shtml" class="darken"><img src="image3"><span>GALLERY THREE</span></a>
    <a href="/portfolio/test4.shtml" class="darken"><img src="image4"><span>GALLERT FOUR</span></a>
</section>

CSS

#photos {
/* Prevent vertical gaps */
line-height: 0;
margin-left:150px;

-webkit-column-count: 2;
-webkit-column-gap:   0px;
-moz-column-count:    2;
-moz-column-gap:      0px;
column-count:         2;
column-gap:           0px;
}

#photos img {
/* Just in case there are inline attributes */
width: 100% !important;
height: auto !important;
}

a.darken {
display: inline-block;
background: black;
padding: 0;
position:relative;  
}

a.darken img {
display: block;

-webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
     -o-transition: all 0.2s linear;
        transition: all 0.2s linear;
}

a.darken:hover img {
opacity: 0.3;           
}

a.darken span{visibility:hidden; font-size:16px;}
a.darken:hover span{color:#fff; visibility:visible;
-webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
     -o-transition: all 0.2s linear;
        transition: all 0.2s linear;
}

Upvotes: 1

Views: 5468

Answers (4)

Maciej Goszczycki
Maciej Goszczycki

Reputation: 1128

I propose something little more generic.

Since the size of the images is not known we can center horizontally the text using the text-align property and then centre it vertically by using an absolutely positioned element with top set to 50%.

Code to add:

a.darken span {
  width: 100%;
  text-align: center;
  top: 50%;
  left: 0
  position: absolute;
}

http://jsfiddle.net/bk2Sd/5/

Upvotes: 0

EfrainReyes
EfrainReyes

Reputation: 991

Since your a.darken selector already has relative positioning enabled, you can enable absolute positioning on the span attribute.

http://jsfiddle.net/EfrainReyes/bk2Sd/4/

a.darken span {
    display: block;
    height: 100%;
    width: 100%;
    visibility:hidden;
    position: absolute;
    top: 50%;
    font-size:16px;
}

I added display: block and full height and width so I could use text-align: center on the a.darken selector.

Upvotes: 0

Travis
Travis

Reputation: 369

This wont work in older browsers, but you can use a combination of "translate" and absolute positioning to vertically and horizontally align the text. Just add the following:

a.darken span{
  visibility:hidden; 
  font-size:16px;

  /* new styles below: */
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  line-height: 100%;
}

Here is an example: http://jsfiddle.net/bk2Sd/2/

Upvotes: 2

zsaat14
zsaat14

Reputation: 1118

You need to add these styles to the <span>:

position: absolute;
top: 50%;
left: 35%;

You can play with these values until you get it where you want. Here is a working example.

Upvotes: 0

Related Questions