Text on image prevents my hover transition

HTML & CSS
1

So i have a Div at the center of an image. I have css to increase the brightness of the image on hover but when mouse is on the text it doesnt work. Can i make it work somehow?

<html>
<head>
<style>
.image{width:150px;heigh:150px;-webkit-filter:brightness(30%);transition:0.4s linear;}

.image:hover{-webkit-filter:brightness(100%);transition:0.4s linear;}


.textOnImage{width:20px;height:20px;font-size:22px;position:absolute;top:66px;left:60px;color:white}


</style>
</head>
<body>


<img class="image" 
src="http://googledrive.com/host/0B3dsaK9yS2d3M0VlWHJOQXZ2OG8/kouvertoura.png" />

<div class="textOnImage">
SOME TEXT
</div>

</body>
</html>
2

We will need to see your HTML an CSS to help…

3

I tried adding the code but it doesnt work.

https://drive.google.com/open?id=0B9v8WVvk55MFZjN0T3RMZ2RmVTQ

4

To add a block of code to your post, type 3 backticks on a line by them selves

Then your code
Then another 3 backticks on a line
2 Likes
5

The problem is the text is covering the image, so when the cursor is over the text, it is hovering the text, not the image.
The trick is to put them both in a common parent container and use the hover pseudo class on that.

The other problem is you are using the webkit prefix, but no version without the prefix, so for non-webkit browsers, it does not work.
If you do use prefixes, always follow them with non-prefixed versions.

4 Likes
6

Hey really appreciate the help! Fixed it. And thanks for the advice too!

7

@mouloudisg,

In addition to SamA74’s observations, there is no valid doctype at the top of the page. Without a valid doctype, all bets of consistent cross-browser behaviors are off.

When coding, spelling matters. “heigh” is not a valid spelling of “height”.

You might want to try a small addition to SamA74’s code to prevent the text from being selectable…

.textOnImage {pointer-events:none;}

One final remark, do not expect anyone to enjoy scrolling offscreen to the right to view your CSS. It is far better to write your CSS indented rather than inline during the development stage and when asking for help. If it were a long, complicated page with long lines of inline CSS, it is possible that people would not be interested in it. We’re only human. ( don’t believe him)

Cheers
:smile:

2 Likes
8

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