I am having a bit of problem with my website:
body {
margin: 0;
font-family: Tahoma;
background-color: #000000;
background-size: cover;
background-attachment: fixed;
color: #ffffff;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
#content {
margin-top: 50px;
animation: fadein 5s;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.00);
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a {
transition: all 0.5s;
}
/* Menu Bars */
.section-1 {
position: fixed;
text-align: center;
width: 25%;
top: 20%;
height: 60%;
float: left;
display: block;
z-index: 1;
background-color: #000000;
}
.section-1:hover + .menu-1 {
opacity: 1;
transition: opacity 0.5s ease-in-out;
}
.menu-1 {
position: fixed;
text-align: center;
width: 25%;
top: 20%;
height: 60%;
float: left;
z-index: 2;
background-color: rgba(255, 0, 0, 0.50);
display: block;
opacity: 0;
transition: opacity 0.5s ease-in-out;
pointer-events: none;
}
<body>
<div id="navigation-menu">
<ul>
<li>Title</li>
</ul>
</div>
<div id="content">
<div class="section-1">
<p>Menu 1</p>
</div>
<div class="menu-1">
<br />
<br />
<br />
<br />
<br />
<br />
Link 1
</div>
</div>
</body>
As you can see, the expected behavior is that when I hover the div with the "Menu 1" text, the div with the "Link 1" link appears and that the "Link 1" link is clickable which will direct the user to another page. However, the "Link 1" hyperlink is unclickable and instead, highlights the "Menu 1" text.
How do I make it so that the "Like 1" hyperlink can be clicked?
You have pointer-events:none on .menu-1. If you absolutely need to keep this property, add pointer-events:auto to the a tag. However, I would suggest restructuring your code so that the menu can transition without the overlay.
Related
I am having a problem with the hero image, it always hides my dropdown menu even though I put a higher z-index on the menu. I have found a "solution" for this, I gave the hero image z-index:-1, but now my button on the hero image doesn't work. I want to have this work without any workarounds.
jsfiddle here (here the dropdown works, because #hero-img has z-index:-1, but the top button doesn't work)
https://jsfiddle.net/xLo7wcph/1/
1) please help me find a reason why the z-index > 0 doesn't work + solution for this, without using z-index:0;
2) bonus question, why the button doesn't work when I set the hero img on negative z-index even though I have btn z-index : 1;
<nav id="navbar" class="flex">
<div class="flex-1 "><img src="images/drevo2.svg"></div>
<div class="flex-2 ">falco's woodwork.</div>
<div class="flex-3 flex-element push">
domů
</div>
<div class="flex-4 flex-element">
nabídka
<div class="dropdown">
<p>motýlci</p>
<p>dekorace</p>
<p>ostatní</p>
</div>
</div>
<div class="flex-5 flex-element">
kontakt
</div>
<div class="flex-6 flex-element">
nákup
</div>
</nav>
<div id="hero-img">
<div class="text-box">
<h1>
<span class="text-box--main">objevte krásu</span>
<br>
<span class="text-box--sub">ručně tvořených výrobků</span>
<br>
</h1>
</div>
<button class="btn"><img src="images/SIPKA DOLU.svg"></button>
</div>
#navbar{
border-bottom:solid 1px black;
.dropdown{
position:absolute;
z-index: 3;
display:none;
border-top:none;
padding:1rem 2rem;
background-color: rgba(0, 0, 0, 0.801);
left:-1.8rem;
top:3.7rem;
p{
color:white;
&:hover{
border-bottom: 1px solid white;
}
}
}
.flex-element:hover .dropdown{
display:block;
z-index: 2;
}
}
#hero-img{
position: relative;
background:linear-gradient(to top, black 0%, rgba(0, 0, 0, 0.5) 0%), url("../images/hero image.jpg") no-repeat top;
height: calc(100vh - 3.8rem);/* - vyska nav baru*/
background-size: cover;
z-index: -1;
}
Removing z-index: -1; from the #hero-img and adding these lines solves your problem.
#navbar{
position: relative;
z-index: 1;
}
Initially what was happening is, position: relative on #hero-img was hiding your dropdown. because position-wise #hero-img was upper than #navbar. that's why you should also add z-index in the #navbar.
And you gave negative z-index value to appear the dropdown. when you give negative z-index to an element it will be rendered under other elements.
In this case, the #hero-img was under the body. the button won't show up when you give high z-index value because it's parent #hero-img is under the top layer.
working demo:
btn,
.btn:link,
.btn:visited {
background-color: rgba(255, 255, 255, 0);
border-style: none;
animation: btnFadeIn .5s ease-in forwards;
outline: none;
position: absolute;
bottom: 2%;
left: 50%;
transform: translateX(-50%);
z-index: 3; }
.btn:hover {
cursor: pointer; }
#navbar {
border-bottom: solid 1px black; }
#navbar .dropdown {
position: absolute;
z-index: 3;
display: none;
border-top: none;
padding: 1rem 2rem;
background-color: rgba(0, 0, 0, 0.801);
left: -1.8rem;
top: 3.7rem; }
#navbar .dropdown p {
color: white; }
#navbar .dropdown p:hover {
border-bottom: 1px solid white; }
#navbar .flex-element:hover .dropdown {
display: block;
z-index: 2; }
#navbar .flex-1 {
width: 3rem;
height: 3rem;
margin-left: .5rem;
align-self: center;
padding: .3rem;
font-size: 2rem; }
#navbar .flex-2 {
padding: .3rem;
font-size: 2rem;
margin-right: 5rem; }
#navbar .flex-2 a {
text-decoration: none;
color: black; }
#navbar .flex-element {
padding: .3rem;
font-size: 2rem;
margin-right: 5rem;
transition: all .2s ease-out;
position: relative; }
#navbar .flex-element a {
text-decoration: none;
color: black; }
#navbar .flex-element:first-child {
margin-right: 0; }
#navbar .flex-element:hover {
transform: translateY(1.5px); }
#navbar .flex-element:active {
transform: translateY(-1.5px); }
#font-face {
font-family: 'Proxima Nova';
src: url("../proxima_ssv/Proxima Nova Thin.otf") format("opentype"); }
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit; }
html {
font-size: 62.5%;
scroll-behavior: smooth; }
body {
font-family: 'Proxima Nova', sans-serif;
line-height: 1.6;
color: black;
box-sizing: border-box; }
.push {
margin-left: auto; }
.line {
background-color: #C6C6C6;
border: solid .1rem #C6C6C6;
max-width: 960px; }
#navbar{
position: relative;
z-index: 1;
}
#hero-img {
position: relative;
/*background: linear-gradient(to top, black 0%, rgba(0, 0, 0, 0.5) 0%), url("../images/hero image.jpg") no-repeat top;*/
background-color:darkgreen;
height: calc(100vh - 3.8rem);
/* - vyska nav baru*/
background-size: cover;
}
.text-box {
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, 40%);
backface-visibility: hidden;
text-transform: uppercase;
text-align: left; }
.text-box h1 {
line-height: 1; }
.text-box--main {
display: inline-block;
font-size: 4rem;
color: white;
animation: moveInLeft 1.5s ease-out; }
.text-box--sub {
display: inline-block;
color: white;
font-size: 6.5rem;
animation: moveInRight 1.5s ease-out; }
.flex {
display: flex;
flex-wrap: wrap; }
<nav id="navbar" class="flex">
<div class="flex-1 "></div>
<div class="flex-2 ">falco's woodwork.</div>
<div class="flex-3 flex-element push">
domů
</div>
<div class="flex-4 flex-element">
nabídka
<div class="dropdown">
<p>motýlci</p>
<p>dekorace</p>
<p>ostatní</p>
</div>
</div>
<div class="flex-5 flex-element">
kontakt
</div>
<div class="flex-6 flex-element">
nákup
</div>
</nav>
<div id="hero-img">
<div class="text-box">
<h1>
<span class="text-box--main">objevte krásu</span>
<br>
<span class="text-box--sub">ručně tvořených výrobků</span>
<br>
</h1>
</div>
<button class="btn">theButtonThatDoesntWork</button>
</div>
I've built a navmenu that has shown/hidden after click a button. In transition I change opasity .box navmenu and height .menu-box links.
But it works only when navmenu is shown. When I try to hide transition doesn't work, navmenu is hidden right away, without animation and time animation.
html
<div class="box " [ngClass]="{'show-mobile-navmenu' : showMobileNavmenu }">
<div class="menu-box" [ngClass]="{'show-menu-box' : showMobileNavmenu }">
<div class="menu " >
<div class="link" *ngFor="let link of links">
<modal-link [link]="link"></modal-link>
</div>
<div class="link">
<span class="a-link" (click)="changeLanguage()">{{'lang' | translate }}</span>
</div>
</div>
</div>
</div>
css
.link {
text-align: center;
}
.a-link {
font-size: 24px;
line-height: 48px;
width: 100%;
font-weight: bold;
}
.box {
background-color: #fff;
opacity: 0;
height: 0;
position: fixed;
left: 0;
width: 100%;
top: 69px;
z-index: 100;
overflow-y: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
transition: opacity 0.5s ease-in-out;
}
.box::-webkit-scrollbar {
/* WebKit */
width: 0;
height: 0;
}
.box.show-mobile-navmenu {
height: calc(100vh - 69px);
opacity: 0.8;
}
.menu-box {
position: relative;
margin-top: -8px;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
opacity: 0;
transition: min-height .5s ease-out, opacity .5s ease-in;
}
.show-menu-box {
min-height: 100%;
opacity: 1;
}
.menu {
width: 100%;
padding-top: 38px;
padding-left: 3px;
}
How to do that when I hide navmenu opacity goes from 1 to 0 and links go down?
I have a popup in which I made a toggle with the help of pure CSS. Now if I run The popup and move my mouse at the uppermost or the lowermost part of the window the popup start disappear. I am using 0% JAVASCRIPT inside my popup code and can't find what was a reason in the code.
here is the issue:https://imgur.com/a/wHjHB7A
focus on the mouse cursor! Also, I am looking a way to open a popup at the page load without js
POPUP code:
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target,.modalDialog:hover {
opacity: 1;
pointer-events: auto;
}
.modalDialog>#__spookyPopup {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #fff);
background: -o-linear-gradient(#fff, #999);
}
.profile_container {
height: 160px;
width: 400px;
background: #;
display: inline-block;
}
.profile_div {
height: 120px;
width: 130px;
margin-top: 20px;
margin-left: 130px;
background: #ddd;
border: 1px solid grey;
}
.head_div {
min-height: 12px;
width: 100%;
}
.priv_cont {
height: 90px;
width: 400px;
background: #;
display: inline-block;
}
.priv_head {
height: 60px;
width: 330px;
margin-left:30px;
margin-top:15px;
background: #;
}
.clicker {
display: inline-block;
width: 100px;
height: 50px;
background-color: ;
color: #FFF;
}
.clicker:hover{border-bottom: 2px solid red ;
}
#click_styling
{
margin-top:20px;
height: 50px;
width: 197px;
text-align:center;
font-size:20px;color:#000;
line-height:50px;
text-decoration:none;
cursor:default;"
}
.clicker.hidden {
display: none;
}
.hiddendiv {
height: 0px;
background-color: green;
overflow: hidden;
transition: height 0.5s;
}
.social {
height: 160px;
width: 400px;
background: #ccc;
display: inline-block;
}
.social_link {
height: 60px;
width: 330px;
margin-left:30px;
margin-top:15px;
background: #ddd;
border: 1px solid grey;
}
.hiddendiv.nr2 {
background-color: red;
}
#showdiv1:target~div a[href="#showdiv1"],
#showdiv2:target~div a[href="#showdiv2"] {
display: none;
}
#showdiv1:target~div a[href="#hidediv1"],
#showdiv2:target~div a[href="#hidediv2"] {
display: inline-block;
}
#showdiv1:target~div .hiddendiv.nr1,
#showdiv2:target~div .hiddendiv.nr2 {
height: 150px;
}
Open Modal
<div id="__spooky_auth_popup" class="modalDialog">
<div id="__spookyPopup">
X
<div class="profile_container">
<div class="profile_div"></div>
</div>
<div class="head_div">
<p style="margin:0;padding:0;text-align:center;
font-size:25px;color:#8d8686;">
<I>Hey, please login to access your private content.</I>
</p>
</div>
<div id="showdiv1"></div>
<div id="showdiv2"></div>
<div>
SOCIAL
SOCIAL
MANUAL
MANUAL
<div class="hiddendiv nr1">
<div class="social">
<div class="social_link">
<div data-html="allow" >
<iframe id="iFrame1" style="border: 0px; display: block" height="400" class="spoooky-auth" src="https://api.spooo.ky/auth/facebook" border="0"></iframe>
</div>
<!-- End of facebook button -->
</div>
<div class="social_link">
<!-- Optional: Linkedin button starts here -->
<div data-html="allow" >
<iframe style="border: 0px; display: inline-block" class="spoooky-auth" src="https://api.spooo.ky/auth/linkedin" border="0"></iframe>
</div>
<!-- End of linkedin button -->
</div>
</div>
</div>
<div class="hiddendiv nr2">y</div>
</div>
<div class="priv_cont">
<div class="priv_head"><p style="margin:0;padding:0;text-align:center;font-size:18px;color:#000;">
<I>By continuing to the content you agree with the cookie
and privacy policies.</I> </p>
</div>
</div>
Any Idea?what was the issue?
Any input is apprecheated.
Thanks in Advance.
It appears your modalDialog box by default has an opacity of zero. Upon hovering it the opacity goes to one. Everything else is also nested in this div that upon no longer hovering the div, it all disappears.
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target,.modalDialog:hover {
opacity: 1;
pointer-events: auto;
}
I am just attempting a simple fix. For some reason my divider isn't showing up on hover? How can I get it to show up like the other text does? I have another example of how i got the divider to look on other pages...
http://runningfish.net/finestc/about/
Right underneath the header of the page that says "About"
Also, what I am currently working with is runningfish.net/finestc
You can see the live code there right underneath the section that says "Recent Sales".
I am still a fledgling coder so if I am doing something inefficiently or could be doing better that you notice, please point it out! I want to get better at coding. Critique welcome!
Thanks!
.grids {
width: 33.33%;
float: left;
display: inline-block;
position: relative;
}
.grids img {
display: block;
height: 33.33vh;
width: 100%;
}
.grid-image-description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
color: #fff;
visibility: hidden;
opacity: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity .5s, visibility .5s;
}
.grid-image-description h2 {
font-family: playfairdisplay;
font-size: 1.7em;
color: #fff;
}
.grid-image-description p {
font-family: playfairdisplay;
font-size: 1.0em;
color: #fff;
}
.grid-image-description hr {
border-top: 1px;
border-color: #001532;
border-style: solid;
box-shadow: 2px 1px 15px #fff;
margin: 0 0 0 10px;
max-width: 200px;
}
.grids:hover .grid-image-description {
visibility: visible;
opacity: 1;
}
.grids-description {
transition: .5s;
transform: translateY(1em);
}
.grids:hover .grid-image-description {
transform: translateY(0);
}
<a href="#nogo">
<div class="grids">
<img class="grid-image-cover" alt="" src="//runningfish.net/finestc/wp-content/uploads/2018/02/Depositphotos_11636543_original.jpg" />
<div class="grid-image-description">
<h2 class="grids-header">House For Sale</h2>
<hr>
<p class="grids-description">123 mulbury street</br>san diego, ca 92101
</p>
</div>
</div>
</a>
Add a width value to <hr>
.grids {
width: 33.33%;
float: left;
display: inline-block;
position: relative;
}
.grids img {
display: block;
height: 33.33vh;
width: 100%;
}
.grid-image-description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
color: #fff;
visibility: hidden;
opacity: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity .5s, visibility .5s;
}
.grid-image-description h2 {
font-family: playfairdisplay;
font-size: 1.7em;
color: #fff;
}
.grid-image-description p {
font-family: playfairdisplay;
font-size: 1.0em;
color: #fff;
}
.grid-image-description hr {
border-top: 1px;
border-color: #001532;
border-style: solid;
box-shadow: 2px 1px 15px #fff;
margin: 0 0 0 10px;
max-width: 200px;
/* added */
width: 200px;
}
.grids:hover .grid-image-description {
visibility: visible;
opacity: 1;
}
.grids-description {
transition: .5s;
transform: translateY(1em);
}
.grids:hover .grid-image-description {
transform: translateY(0);
}
<a href="#nogo">
<div class="grids">
<img class="grid-image-cover" alt="" src="//runningfish.net/finestc/wp-content/uploads/2018/02/Depositphotos_11636543_original.jpg" />
<div class="grid-image-description">
<h2 class="grids-header">House For Sale</h2>
<hr>
<p class="grids-description">123 mulbury street<br>san diego, ca 92101
</p>
</div>
</div>
</a>
I'm looking for a CSS only solution to fade an image in a back DIV when hovering over any section of the DIV, including DIVs that are in front of it.
Here is what I've been able to build so far: http://jsfiddle.net/kqo10jLb/
The CSS:
#caseouter {
position: relative;
top: 0px;
}
#casewrap2 {
background-color: #000;
}
#casetitle {
font-size: 30px;
width: 100%;
display: block;
text-transform: uppercase;
text-align: center;
padding: 10px 0px 0px 0px;
color: #fff;
margin-bottom: 0px;
}
#casethumb {
width: 100%;
display: block;
margin-bottom: -100px;
opacity: 1;
transition: .2s opacity ease .2s;
height: 100px;
}
#casesecondline {
font-size: 30px;
color: #666;
text-transform: uppercase;
margin: 0 auto;
display: block;
width: 100%;
text-align: center;
color: #fff;
margin-top: -10px;
padding: 0px;
}
#casethumb img {
width: 100%;
}
#casethumb:hover {
opacity: .75;
}
#casetitle:hover ~ #casethumb a {
opacity: .75;
}
#casesecond:hover ~ #casethumb a {
opacity: .75;
}
And the HTML:
<div id="casewrap2">
<div id="casethumb">
<a href="www.google.com">
<img src="http://ringer.tv/wp-content/uploads/2014/08/case_bravo.jpg">
</a>
</div>
</div>
<div id="caseouter">
<a href="www.google.com">
<div id="casetitle">Headline</div>
<div id="casesecondline">Subheadline</div>
</a>
</div>
As you'll see, the back image fades on hover, however, it will not fade when I hover over the headline and subheadline text. I've tried using #casetitle:hover ~ #casethumb a but I'm obviously doing something wrong. Thanks!
Is this what you're after? http://jsfiddle.net/kqo10jLb/1/
I moved the caseouter into the casewrap2 object and changed the hover to this:
#casewrap2:hover #casethumb {
opacity: .75;
}