I am trying to make a simple navbar with some clickable links inside. However, right now I can't actually click the contents of the Navbar. I have a feeling the Navbar is "blocking" the accessibility of the links inside, but long story short I want to actually be able to click the links. I've attached snippets of my html and scss below. Where did I go wrong?
<nav class="cool-navbar">
<div class="left-buttons">
<a class="cool-link">Sammy Al Hashemi</a>
</div>
<div class="middle-spacer"></div>
<div class="right-buttons">
<a class="cool-link">Projects</a>
<a class="cool-link">Contact</a>
</div>
</nav>
.cool-navbar {
display: flex;
flex-direction: row;
width: 100vw;
height: $navbar-height;
background: inherit;
.left-buttons {
width: auto;
}
.middle-spacer {
flex-grow: 1;
}
.right-buttons {
width: auto;
}
.left-buttons .cool-link,
.right-buttons .cool-link {
display: inline-block;
text-align: center;
cursor: pointer;
padding: 15px 35px 12px 35px;
background: inherit;
font-family: $font-stack;
text-align: center;
font-size: $secondary-font-size;
color: $secondary-color;
animation: cool-button-entrance 1s ease-in-out 0s 1 backwards;
-webkit-animation: cool-button-entrance 1s ease-in-out 0s 1 backwards;
}
}
.cool-navbar::before {
content: '';
position: absolute;
border-bottom: $secondary-color solid 1px;
width: 100%;
height: $navbar-height;
animation: cool-border-animation 1s ease-in-out 0s 1 both;
-webkit-animation: cool-border-animation 1s ease-in-out 0s 1 both;
}
The problem is the <a> tag links haven't been given a hypertext reference. It can be set with the href attribute like so: <a href="link goes here"> You can set the reference to '#' as a placeholder until you have a link to place:
<nav class="cool-navbar">
<div class="left-buttons">
Sammy Al Hashemi
</div>
<div class="middle-spacer"></div>
<div class="right-buttons">
Projects
Contact
</div>
</nav>
Hope this helps
Figured it out! It was because the ::before pseudoelement was hovering over the link, blocking it being clicked. I instead set its top: $navbar-height and removed its height. This stopped causing it to block.
Related
I'm maybe 2 weeks into coding so apologies if I don't format correctly (code and question itself).I am trying to set a delay for the time it takes the buttons to switch text. Thank you for the help!
I've tried googling this and youtube with no luck.
I have tried adding
transition
transition-delay
body{
background-color: black;
}
.column{
position: fixed;
left:0;
bottom:0;
top:55px;
width:72px;
z-index: 200;
padding-top: 20px;
}
.about,
.skills {
font-size:72px;
width: 10em;
text-align: left;
border:none;
background-color: black;
color:red;
}
.about:hover span {
display: none;
}
.about:hover:after {
transition-delay: 3s;
content: "ABOUT";
}
.skills:hover span {
display: none
}
.skills:hover:after {
content: "SKILLS"
}
<h1>
<div class="column">
<button class="about" data-hover="ABOUT">
<span>
I
</span>
</button>
<button class="skills">
<span>
AM
</span>
</button>
</div>
</h1>
First of all, I would look into the html semantics a bit. Having div tags inside an h1 doesn't make much sense. So consider changing the h1 to a div. Also, the 3s delay is enormous. Think of something a bit faster, like 300ms.
The real issue is that display states and transition don't really work together since it swaps between states like block and none. But there are other solutions to this. You could use position: relative; on a parent div and give the children position: absolute. This way, you could make the transitions with opacity instead.
I have made an example for you so you can get the idea. I have commented on the CSS so you can follow up on what is happening.
/* Lets give our spans some styling: */
span{
font-size: 30px;
font-weight: 600;
font-family: sans-serif;
margin-bottom: 2rem;
max-width: 60ch;
}
/* Lets make the "container" position relative,
this way the absolute children will stay inside the container */
.hover-effect{
position: relative;
}
/* Let's give both of the children position absolute */
.hover-effect span{
position: absolute;
color: black;
opacity: 100%;
transition: 300ms ease-in 300ms; /* Delay: 300ms*/
}
/* Let’s override the previous.
This actually happens when we remove the hover, so we want to
trigger this animation first, hence the delay of 0ms*/
.hover-effect span.on-hover{
opacity: 0%;
transition: 300ms ease-in 0ms;
}
/* When we hover the container, let's change both spans */
.hover-effect:hover span{
color: red;
opacity: 0%;
transition-delay: 0ms;
}
/* Let’s override the previous.
When we hover on the container, the span with the class "on-hover"
becomes visible, and we wait 300ms before it happens so that the
"disappearing" animation gets its time to trigger. */
.hover-effect:hover span.on-hover{
opacity: 100%;
transition-delay: 300ms;
}
<div class="hover-effect">
<span>Try and hover over me</span>
<span class="on-hover">Try and remove the hover</span>
</div>
So, on hoovering an image, a button appears onto the image, but it is not clickable . The same applies for links or anything inside the div holding the image. I was wondering how i can get over with this.
My html
<div class="content_img">
<img [src]="mydata.image.original" >
<div >
<button type="button"class="btn btn-primary"> Description </button>
</div>
</div>
My Css
/* Parent Container */
.content_img{
position: relative;
width: 90%;
}
/* Child Text Container */
.content_img div{
position: absolute;
bottom: 0;
right: 0;
background:black;
color: white;
margin-bottom: 5px;
font-family: sans-serif;
opacity: 0.7;
visibility: hidden;
-webkit-transition: visibility 0s, opacity 0.5s linear;
transition: visibility 0s, opacity 0.5s linear;
}
/* Hover on Parent Container */
.content_img:hover{
cursor: pointer;
}
.content_img:hover div{
width: 100%;
height: 100%;
visibility: visible;
opacity: 0.75;
}
Can anyone help me out please
What do you mean by that ? I tested the code and <a> tag works. I tested it like follow :
<a href="www.google.com" target="">
<button type="button"class="btn btn-primary">Description</button>
</a>
The button link is clickable. If it is a button, did you set a onclick event so that button call your function?
I have a working example, but I want to format the text which is shown when the image gets hovered. Here is the code:
.ecommerce-categories [class^=col-] > a:before {
content: attr(data-text);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 50px 20px;
color: #fff;
word-wrap: break-word;
overflow: hidden;
background-color: rgba(0,0,0,0.4);
opacity: 0;
-webkit-transition: all .7s ease;
transition: all .7s ease;
}
.ecommerce-categories [class^=col-] > a:hover:before {
opacity: 1;
}
<div class="col-lg-4 categories">
<a href="#" data-text="Day for rafting and outdoor activities" style="background: url('images/catagories/cat-rafting.jpg') no-repeat center center; background-size: cover;" >
I want to be able to edit the text inside the attribute 'data-text' with html tags. How should I refactor this code so I can do that? (data-text="Day for rafting and outdoor activities").
Thank you.
Per the spec HTML added in the CSS content attribute does not alter the document tree. So in your case you can't format a part of the text contained in data-text.
To do so you can make use of javascript. There is a ton of javascript tooltip plugins / libraries / code examples available on the internet.
I'm trying to get an image to fill a specific section on the web page I'm making but I cannot find anything that works online.
.bigslide {
display: block;
position: relative;
width: 100%;
/*background: rgb(231, 231, 231);*/
padding: 160px 0;
color: #0ed1fb;
animation: slideleft 2000s infinite linear;
-webkit-animation: slideleft infinite linear;
}
.bigslide h1 {
font-size: 34px;
font-weight: bold;
margin-bottom: 20px;
}
.bigslide p {
font-size: 20px;
}
<section id="bigslide">
<div class="bigslide">
<div class="container">
<h1 class="slideup">Tigercraft01's High Quality Setups</h1>
<p>Scroll down to read about me and what I do.</p>
</div>
</div>
</section>
I need the image to show behind the text that loads with the snippet provided.
I'm not sure why it isn't in your CSS since you're trying to add an image but if you want to add a background image to your section, just use :
.bigslide {
background-image: url('http://lorempixel.com/g/500/500/');
background-repeat: no-repeat;
background-size: cover;
}
This website is based on wordpress
http://www.gear-rat.com/
How can I get that image effect can anyone help me? in HTML5 and CSS3
I just started web design and am still learning by copying good websites so I can get handy with web design, ofc I'm not selling them or anything illegal
That effect is done with the following code:
JavaScript:
jQuery(document).ready(function() {
function tz_overlay() {
jQuery('.post-thumb a').hover( function () {
jQuery(this).find('.overlay').stop().animate({ opacity: 1 }, 200);
}, function () {
jQuery(this).find('.overlay').stop().animate({ opacity: 0 }, 200);
});
}
tz_overlay();
});
CSS:
.post-thumb a span.overlay
{
background: rgba(0, 0, 0, 0.8);
position: absolute;
width: 100%;
height: 60%;
display: block;
line-height: 20px;
z-index: 5;
filter: alpha(opacity=0);
-khtml-opacity: 0;
-moz-opacity: 0;
opacity: 0;
text-align: center;
padding-top: 40%;
color: #ada89c;
font-size: 15px;
font-weight: bold;
}
HTML:
<div class="post-thumb port-thumb">
<a href="http://www.gear-rat.com/test/portfolio/steel-riveted-box/">
<span class="overlay" style="opacity: 0;">Steel Riveted Box</span>
<img src="http://www.gear-rat.com/test/wp-content/uploads/2013/06/boxthumb1.jpg" alt="Steel Riveted Box" style="opacity: 1;">
</a>
</div>
How I found the code:
I looked at the images and noticed they all had a class called overlay, so I looked in the .js files for any mention of overlay and saw it being used in the tz_overlay function. So I copied that function and the div surrounding an image to my website. When I opened a page with that div in it, it worked like that website so I know I had it.
It is a good idea to look around for specific indicators like that when trying to find out how something works on a website.
You can solve this with only html and css3, you don't need javascript or a javascript library.
<html>
<head>
<title>hello world</title>
<style type="text/css">
div#tmp{
background-color: #A36333;
height: 100px;
width: 100px;
}
div#tmp div{
background-color: #000000;
height: 100%;
width: 100%;
color: #ffffff;
line-height: 100px;
vertical-align: middle;
text-align: center;
opacity: 0.0;
transition: opacity 0.2s linear 0s;
-webkit-transition: opacity 0.2s linear 0s;
-ms-transition: opacity 0.2s linear 0s;
-moz-transition: opacity 0.2s linear 0s;
}
div#tmp div:hover{
height: 100%;
width: 100%;
opacity: 0.6;
}
</style>
</head>
<body>
<div id='tmp'>
<div>hello world</div>
</div>
</body>
</html>
The transition property defines how elements in html change.
http://www.w3schools.com/css/css3_transitions.asp
To alter an element by mouse over you can use the css :hover selector in css.
http://www.w3schools.com/cssref/sel_hover.asp
Check out this fiddle:
http://jsfiddle.net/5tmt98sk/
Visit the JS Fiddle page
When you are on the jsfiddle page, put your mouse over the image
The website you looked at does the same thing, but there image is the same image, but they photoshop it to be darker, and the photoshop some text on to it.Same concept =)