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)
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.