1 reply [Last post]
millers
millers's picture
Offline
Enthusiast
Last seen: 2 years 3 weeks ago
Timezone: GMT+1
Joined: 2004-11-22
Posts: 70
Points: 41

Hi

I am trying to create a layout that has

2 images per row
hovering over an image puts on a color overlay
and features vertical and horizontal centered text

Is this possible?

Here's what I have, the div is centered but the text within the div isn't (some text will be one line, some will be two)

<style>
.blog-item {position: relative; display: inline-block; margin: 0 1% 2%; height: auto;}
.blog-item div { display: block; 
  bottom: 0;
  height: 100px;
  left: 0;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
      color: #fff;
    font-size: 30px;
  }
.blog-item div:hover {background-color:rgba(255,0,0,0.8)} /*not working*/
</style>
 
<div class='blog-item'>
 
    <img src="image.jpg" width="535" height="535" alt="">
    <div>A polished thingy</div>
 
</div>
 
<div class='blog-item'>
 
    <img src="image.jpg" width="535" height="535" alt="">
    <div>A polished thingy A polished thingy A polished thingy</div>
 
</div>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 12 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

So is it just the text you

So is it just the text you need centered?
text-align:center;
should help.