Hello there,
I am trying to make iframe expanded and shrank when the mouse pointer is on the iframe by using media query.
However, it is not working, but, when the mouse point is on the frame border then it is expanded and shrank.
Here is my source code.
<html><head><style type="text/css">
iframe[id^=sidebanner]{
width: 80px;
!important;
}
iframe#sidebanner{
right: 0;
}
iframe[id^=sidebanner]:hover{
width: auto;
-webkit-transition: width ease-in-out 0.1s;
-moz-transition: width ease-in-out 0.1s;
-ms-transition: width ease-in-out 0.1s;
-o-transition: width ease-in-out 0.1s;
transition: width ease-in-out 0.1s;
}
@media all and (max-width: 2500px) {
iframe[id^=sidebanner]:hover{
width: 50%;
}
}
@media all and (max-width: 900px) {
iframe[id^=sidebanner]:hover{
width: 55%;
}
}
@media all and (max-width: 800px) {
iframe[id^=sidebanner]:hover{
width: 60%;
}
}
@media all and (max-width: 750px) {
iframe[id^=sidebanner]:hover{
width: 65%;
}
}
@media all and (max-width: 700px) {
iframe[id^=sidebanner]:hover{
width: 70%;
}
}
@media all and (max-width: 650px) {
iframe[id^=sidebanner]:hover{
width: 75%;
}
}
@media all and (max-width: 600px) {
iframe[id^=sidebanner]:hover{
width: 80%;
}
}
</style></head><body><iframe id="sidebanner" src="" frameborder="1" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="true" style="top: 0px; height: 100%; right: 0px;"></iframe></body></html>Also, this source code is working on chrome, FireFox and Opera.
Only IE and Edge is not working.
Regards,