css popup
this is working in IE, Chrome, and somehow in OPera, but not in Firefox, any idea why?? <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="normalize28.4.23.css"> <style> .main-div { position:relative; width:100%; max-width:1000px; height:100%; max-height:800px; background:lightblue url('Hotel.jpg') no-repeat center/cover; } .i-box { position:absolute; width:100px; height:100px; background-color:orange; bottom:1%; right:1%; z-index:1; text-align:center; font:bold 6em times, serif; line-height:50px; } .i-box span { font-weight:600; } .info-layers { position:absolute; width:80%; height:80%; bottom:10%; left:10%; display:none; } .info-layers > div:first-child { opacity:0.5; background-color:white; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); height:100%; width:100%; z-index:87; } /*=================================== ** info text **=================================== */ .info-layers > div:nth-child(2) { opacity:1.0; color:#FFFFFF; font-weight:bold; font-size:1.5em; letter-spacing:.08em; background-color:#222222; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); padding:2em 3em 2em; max-width:70%; z-index:90; } .i-box:hover { display:none;} .i-box:hover ~ .main-div:not(:hover) { opacity:0.5; } .i-box:hover + .info-layers { display:block; } .i-box:hover + .info-layers > div:first-child { opacity:0.5; width:80%; height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:87; background-color:white; margin:0; padding:0; } </style>
כל התגובות (1)
Do have a page online demonstrating the problem? If your site is not up yet, you can use Jsfiddle, Codepen, etc.
When sharing a link to a non-Mozilla site, to avoid a delay caused by the spam link moderation feature, break the URL by inserting a space or two before the TLD. For example:
https://www.example .com/dir/page