Ask your WordPress questions! Pay money and get answers fast! (more info)

A simple problem of positionning div WordPress

  • SOLVED

Hope it will be simple for you guys.

I have a position problem for a div. In my wp portfolio page I use an hover effect to show project titles (with white bg) on top of the thumbnail. For now titles show up above the image and not on top.

Please have a look here :
http://www.annebaraquin.com/portfolio/

".entry-meta" should show on top of ".post-thumb" and not above.

Answers (3)

2013-07-04

Albert Shala answers:

I'll take a look


guillaume guillaume comments:

ok ,thanks


Albert Shala comments:

Sorry can you clarify what you need exactly, I don't know what show on top but not above means?


Albert Shala comments:

Should the white background cover the entire image when you hover?


Albert Shala comments:

Ok I see what you mean, sorry didn't see it initally, take a look at this:


.entry-meta {
background-color: #fff;
font-size: 12px;
color: #8d8f8f;
width: 210px !important;
height: 140px;
top: 140px !important;
right: -px;
line-height: 20px;
margin-top: -153px;
position: relative !important;
-webkit-transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
-ms-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
opacity: 0;
z-index: 2;
}


Albert Shala comments:

Improved:


.entry-meta {
background-color: #fff;
font-size: 12px;
color: #8d8f8f;
width: 210px !important;
height: 140px;
top: 140px;
right: 0;
line-height: 20px;
margin-top: -153px;
position: relative !important;
-webkit-transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
-ms-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
opacity: 0;
z-index: 2;
}


guillaume guillaume comments:

for now you can hover the thumbnail but the title display above the image.