Text under image CSS WordPress

• SOLVED

What I need to do: put the text under the image so when I hover it is revealed. NOT UNDER IT ON THE Y-AXIS

The problem: works in Google Chrome but text gets shifted to the right of the container in Firefox, I need this to work in all browsers. Had it working before but I'm not sure what I did!

Link: [[LINK href="http://kaiio.com/category/shots/"]]http://kaiio.com/category/shots/[[/LINK]]

MARKUP:

<!-- Get the image -->
<div class="img">
<a href="<?php the_permalink('') ?>">

<!-- Excerpt title -->
<span class="title">
<?php the_title(); ?>
</span>

<?php
// call the function in the loop of your template
$images = get_all_image_from_post();

// pass each image src to TimThumb
foreach ($images as $image) { ?>
<img src="<?php echo get_template_directory_uri(); ?>/scripts/timthumb.php?src=<?php echo $image; ?>&amp;h=235&amp;w=375" class="index" alt="<?php the_title_attribute(); ?>" title="<?php the_title_attribute(); ?>" />
<?php } ?>

</a>
</div>


MY CSS:
#portfolio_content .img a {
color:#2D2D2D;
z-index:1
}
#portfolio_content .img a:hover {
color:#DC5B3D!important
}
#portfolio_content .img {
display:block;
float:left;
height:350px!important;
margin:0 26px 19px 0 !important;
padding:0px;
overflow:hidden;
width:357px;
background:#FFF
}
#portfolio_content .img img {
display:block;
position:relative!important;
height:235px!important;
margin:0 0 10px!important;
float:left;
background:#FFF;
overflow:hidden;
padding:0px;
z-index:100!important;
width:370px!important
}
#portfolio_content .img img:hover {
background:#E5E5E0;
z-index:0
}
#portfolio_content .img .title, #portfolio_content .img .title a {
font-family:'Oswald', arial, serif;
clear:both;
text-transform:uppercase;
font-size:30px;
text-shadow:#d7d7d7 1px 1px 1px;
width:370px;
padding:25px 0;
float:left!important;
z-index:50!important;
position:absolute
}

Answers (2)

2011-05-14

Julian Lannigan answers:

I would move the "title" span below the image using this code:
<a href="<?php the_permalink('') ?>">
<div class="img">
<?php
// call the function in the loop of your template
$images = get_all_image_from_post();

// pass each image src to TimThumb
foreach ($images as $image) { ?>

<img src="<?php echo get_template_directory_uri(); ?>/scripts/timthumb.php?src=<?php echo $image; ?>&amp;h=235&amp;w=375" class="index" alt="<?php the_title_attribute(); ?>" title="<?php the_title_attribute(); ?>" />

<?php } ?>
<!-- Excerpt title -->
<span class="title"><?php the_title(); ?></span>
</div>
</a>

Then remove the "position:absolute" from "#portfolio_content .img .title, #portfolio_content .img .title a", specifically line 503 from your styles.css.

---

Lucas Wynne comments:

When I say under I mean literally under, in the same place the image is. Not down in the Y axis. Sorry, should have made that more clear.

---

Julian Lannigan comments:

Do you want the same padding on the text?

---

Lucas Wynne comments:

Yes, for what I'm doing the padding shouldn't matter though.

I want the text to be revealed on-hover. If you view it in Google Chrome it works, Firefox it doesn't. I need it to work in all browsers.

---

Julian Lannigan comments:

Ok, so you don't have to change your output code, just your css.

1. #portfolio_content .img .title, #portfolio_content .img .title a
- ADD: margin-top: 141px;
- CHANGE: position to relative : position:relative;

2. #portfolio_content .img img
- CHANGE: position to absolute : position:absolute;

3. #portfolio_content .img (optional if you want to remove the bottom white area)
- CHANGE: height to 235px : height:235px !important;

The above works in both chrome and firefox.

2011-05-14

Denzel Chia answers:

Hi,

In firefox firebug, if I change the following style code's position to absolute.
It will look like what it is in google chrome. line 487 style.css


#portfolio_content .img img {
background: none repeat scroll 0 0 #FFFFFF;
display: block;
float: left;
height: 235px !important;
margin: 0 0 10px !important;
overflow: hidden;
padding: 0;
position: relative !important;
width: 370px !important;
z-index: 100 !important;
}


Change to


#portfolio_content .img img {
background: none repeat scroll 0 0 #FFFFFF;
display: block;
float: left;
height: 235px !important;
margin: 0 0 10px !important;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 370px !important;
z-index: 100 !important;
}



You will need to shrink the image width a bit.

Thanks.
Denzel

---

Denzel Chia comments:

Oh! Julian posted the correct answer faster then me.

Thanks.
Denzel

---

Denzel Chia comments:

Oh! Julian posted the correct answer faster then me.

Thanks.
Denzel