CODEWITHSUNDEEP
htmlcss
little tiny man
little tiny man

Reputation: 819

CSS hover effects only work with absolute positioning?

I'm trying to make some text appear over an image when the image is hovered over.

This is typically a simple process, however apparently :hover doesn't work if the first div (for example)

first.div:hover second.div {

over (in my case an image) is using relative positioning instead of absolute.

There are lots of images in this page and they are set up as tables through CSS with attributes such as display:table; so I don't think I have the option of switching to absolute positioning. I know CSS tables aren't generally condoned, but I absolutely have to do it this way.

Right now I'm using opacity changes to try to make the text appear. I've tried using z-index too, but I think the problem is that the :hover effect doesn't work well with absolute positioning. What workarounds, if any, are available?

I'm not opposed to using languages other than HTML/CSS, but I'm pretty inexperienced and I don't understand them, so I'd prefer a CSS work around for this, but beggars aren't choosers.

As requested, here's some code:

HTML

<div class="cell"><img class="box" src="image1.jpg"><div id="text">Text text text</div></div>

CSS

.cell { position:relative; display:table-cell; background-color:black; width:700px; height:auto; } #text { display:table; position:absolute; z-index:999; color:#fff; text-align:center; width:100%; top:48%; left:0; }

img { max-height:600px; max-width:600px; height:auto; width:100%; filter: url(filters.svg#grayscale); /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */ opacity:0.4; z-index:2; }

img:hover { filter: none; -webkit-filter: grayscale(0); opacity:1.0; }

I'm not sure on what's causing this so I included a lot more than necessary... I'm a little new to coding so take it easy on me, but I can't get cell.div:hover #text { opacity:1;} to work. I read somewhere that this is because hover effects don't work with relatively positioned divs...

Upvotes: 0

Views: 1824

Answers (3)

little tiny man
little tiny man

Reputation: 819

Wow, literally 30 seconds after I took the time to post all of my code I found a solution. I used div.cell:hover #text { opacity:1; } and everything worked. Not sure what I was doing wrong it was a late night and probably tried to do something dumb like img.box:hover #text commands. Anyway disregard this question guys, and thanks

Upvotes: 0

Davidicus
Davidicus

Reputation: 716

you can just use opacity to achieve this. Make sure you are targeting the pic on hover. Check out this fiddle.

http://jsfiddle.net/Davidicus/69ZTN/

Upvotes: 0

user2784458
user2784458

Reputation:

I am not getting you proper, what is your issue. And if you are clear to you have problem in only opacity, then you can use css as below.

first.div:hover second.div {
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
filter: alpha(opacity=75);
-khtml-opacity: 0.75;
-moz-opacity: 0.75;
opacity: 0.75; }

If it's not work for you, then please share your code or live link, then explain you proper.

Upvotes: 1

Related Questions