Wordpress media file - hover on image

Question

What i need to do:

I added images to a wordpress post, via the media uploader, from within the visual editor.

On the site when hovering on those images, I want it to do hover-effect for another image with yellow background and opacity and sign of "+".

I tried many things, even old plugin of "image hover", but none worked.

Is there a way to do it only with css? without scripts? if yes - how?

Answer 1

Here is the css, but it will require some html changes as well.

Here is a Fiddle to verify this is what you want.

@import url('//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css');

.size-thumbnail {
    position: relative;
    text-align: center;
    width: 150px;
    height: 150px;
}

.size-thumbnail:hover:before {
    content: "\f067"; 
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    color: #000;
    font-size: 50px;
    position: absolute;
    line-height: 150px;
    width: 150px;
    background-color: rgba(255,247,102,0.5);
}