CODEWITHSUNDEEP
wordpresscssiframe
James Winfield
James Winfield

Reputation: 61

Hover Effect On Iframe

I am creating a monotone Wordpress blog where images and iframes (Youtube) change from monotone to colour on hover.

http://amitoooldforclubbing.co.uk/

I've had no problem for the images:

img {
-webkit-filter: grayscale(100%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}

img:hover {
-webkit-filter: grayscale(0%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}

This works fine.

However when I try to do the same for iframes, it doesn't work. Changing it to greyscale does - but the hover effect does not work.

Any idea?

iframe {
-webkit-filter: grayscale(100%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}

iframe:hover {
-webkit-filter: grayscale(100%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}

Thanks James

Upvotes: 1

Views: 1533

Answers (2)

Chris Haugen
Chris Haugen

Reputation: 817

I would create another empty div inside your iframe, color it grey with opacity and position it absolute top bottom left and right 0, so it's the same size as your iframe. Then, use javascript to change the div on mouseenter and mouseleave to display none, display block respectivly. Yes, it required another DOM element, but it's more widely supported than grayscale()

so something like this:

note: if the div makes the video too hard to see you can do the same thing, with jquery, just replace display: none, and dipslay: block with your greyscale() and axe the extra div tag

HTML

<iframe>
  <div>
  </div>
</iframe>

CSS

iframe{
    position: relative; //this is important so the position absolute references the iframe
}
div{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
}

Jquery

document.ready(function(){
    $('iframe').mouseenter(function(){
        $('div').css('display', 'none');
    });
    $('iframe').mouseleave(function(){
        $('div').css('display', 'block');
    });
});

here's the documentation for mouseenter and mouseleave

Upvotes: 0

Paul Graffam
Paul Graffam

Reputation: 2149

You simply forgot to set the hover filter grayscale on the iframe back to 0: -webkit-filter: grayscale(0%);. Tested it out on your site and it works now. However you might want to add a class that sets the grayscale to 0 on click as well since you lose the iframe color while the video is playing on hover out. Also, just in case you might not know -webkit-filter is only used by some modern browsers: http://caniuse.com/#feat=css-filters

Upvotes: 1

Related Questions