how to have the same hover image for many images

Question

I have a few pictures in a table that they work as a link and in hover a play button should appear over them.

I tried many different tricks but they all have problems which dont work properly. I decieded to share my question here to find an standard solution.

Here is what I have done so far:

img{
    position: relative;
}
img:hover:before {
    background:url(http://i40.tinypic.com/i3s4dc.png) no-repeat center center;
    content:"";
    width: 100%;
    min-height: 100px;
    position: absolute;
    left: 0;
}

I dont know if I am in the right direction or not, but have a look at the demo http://jsfiddle.net/jmXdh/8/ and if it is wrong then please let me know any other way.

why can't you simply add an additional class to your element, that only loads a background image on hover? — klewis, Jun 24 '13 at 21:19

score 3 · Answer 1 · edited May 23 '17 at 12:27

3

You unfortunately can't use the ::before and ::after pseudo-elements with replaced elements. The content of all replaced elements is outside the scope of CSS.

From the Generated and Replaced Content Module (WD):

Replaced elements do not have '::before' and '::after' pseudo-elements; the 'content' property in the case of replaced content replaces the entire contents of the element's box.

edited May 23 '17 at 12:27

Community

1
1

answered Jun 24 '13 at 21:15

Adrift

58,167
12
92
90

1

But the OP could use `a:before` instead, no? – landons Jun 24 '13 at 21:20

score 2 · Accepted Answer · answered Jun 24 '13 at 21:25

Here's something that might work, assuming you can add additional markup:

http://jsfiddle.net/isherwood/jmXdh/11/

a {
    display: inline-block;
    overflow: hidden;
    position: relative;
}
a:hover .play {
    background:url(http://placehold.it/80x80) no-repeat center center;
    opacity: 0.8;
    position: absolute;
    width: 80px;
    height: 80px;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-top: -50px;
}

<a href="/">
    <div class="play"></div>
    <img class="img" src="http://i42.tinypic.com/2v9zuc1.jpg" />
    <br />
    <b>Video test</b>
</a>

Or with a transition effect:

http://jsfiddle.net/isherwood/jmXdh/12/

.play {
    opacity: 0;
    transition: opacity 0.3s;
}
a:hover .play {
    opacity: 0.7;
}

how to have the same hover image for many images

2 Answers2