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">
… (funda kabanzi)
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>
i
fooobar-bazzz qux fooobar and bazzz