Align rollover text centrally in image area

HTML & CSS
1

I’m trying to get some rollover text to sit itself centrally vertically and horizontally and I cant seem to get it to go.

.obj
{
width: 360px;
height: 300px;
background-color: lightgreen;
display: inline-block;
margin: 10px;
text-align:center;
}
obj.push {
height: 0px
}
pushend {
width: 100%;
height: 0px;
display: inline-block;
}
item {
overflow: hidden;
width: 360px;
height:195px;
background:#222;
}
.item img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.item:hover img {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
opacity: 0.2;
filter: alpha(opacity=20); /* For IE8 and earlier */
}
obj .text {
position: absolute; /* or absolute */
visibility:hidden;
color:white;
font-size:24px;
text-transform:uppercase;
}
.obj:hover .text {
visibility:visible;
}

<div class="obj"><a href="#"><p class="text">REQUEST REPORT</p><div class="item"><img src="http://cl.ly/image/0v15321t3W1a/pepsi.jpg" alt="pepsi" width="360" height="300"><div class="item-overlay top"></div></div></a></div>

Its the REQUEST REPORT text, when you rollover the first image, and can be seen here -

[Link](http://www.tourcheck.com/new/index2.php)

I wont it also to just appear when you rollover the image, because at the moment it appears which is difficult to see when the mouse enters the box through the green area too.

2

Hi there multichild,

here is a rather different take on your problem…

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #e6e6fa;
 }
.obj {
    width: 22.5em;
    padding-bottom: 6.5em;
    background-color: #90ee90;
 }
.obj a {
    display: block;
    position: relative;
    height: 12.25em;
    background-color: #fff;
    background-image: url(http://cl.ly/image/0v15321t3W1a/pepsi.jpg);
    background-size: 90% auto;
    background-position: center top;
    background-repeat: no-repeat;
    transition: all 0.3s ease-in-out;
 }
.obj span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(34,34,34,0);
    color: rgba(255,255,255,0);
    transition: all 1s ease-in-out;
 }
.obj span span {
    width: auto;
    height: auto;
    top: 50%;
    left: 50%;
    padding:0.5em;
    border-radius:0.5em;
    transform: translate(-50%,-50%);
 }
.obj a:hover {
    background-size: 110% auto;
    background-position: center 25%;
 } 
.obj a:hover span {  
    background-color: rgba(34,34,34,.8);
    color: rgba(255,255,255,1);
 } 
</style>

</head>
<body> 
<div class="obj">
 <a href="#">
  <span>
   <span>REQUEST REPORT</span>
  </span>
 </a>
</div>
</body>
</html>

…which may or may not suit your purposes. :mask:

coothead

3

Hi,

I’ll def sift through it, as it seems what I need appart from the fact that the div Im creating is dynamic, so having the background image in the obj a wont work, as there will be more than one.

4

Not sure if this is what you meant?

.obj > a{position:relative;display:block;overflow:hidden;}
.obj .text{
position:absolute;
left:50%;
top:50%;
width:100%;
margin:0;
text-align:center;
transform:translate(-50%,-50%);
}
3 Likes
5

PaulOB to the rescue, worked a treat, cheers

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.