CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
user3231901
user3231901

Reputation: 77

google iframe change opacity on hover

I have a google maps iframe on my webpage (in contact page), now I am trying to make the iframe showing opacity 60% for example, but when hovering the iframe it becomes 100%.

Example: Opacity Google iframe

I was thinking about putting another div on top of the iframe and give it a white color, change opacity top 60% and when hovering it changes to 100%. Not sure if I am doing it right, and where to put the "position: absolute" and "position: relative".

Is this achievable with CSS and HTML only ?

Upvotes: 1

Views: 1972

Answers (1)

Jack
Jack

Reputation: 1941

I've added vendor prefixes for opacity, now it should have full browser support. Give it a try. 

iframe{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=60);
    -moz-opacity: 0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6;
}

iframe:hover{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}

UPDATE - to add transitions:

iframe{
    transition:all 1s linear; 
    -o-transition:all 1s linear; 
    -moz-transition:all 1s linear; 
    -webkit-transition:all 1s linear;
}

Upvotes: 1

Related Questions