what is wrong with this code? I am unable to execute upon click of active tabs.
.sample-4.sample li:nth-child(1) a.nav-link.active ~ li:last-child:after{transform:translateX(-290%)}
.sample-4.sample li:nth-child(2) a.nav-link.active ~ li:last-child:after{transform:translateX(-104%)}
.sample-4.sample li:nth-child(3) a.nav-link.active ~ li:last-child:after{transform:translateX(-90%)}
.sample-4.sample li:nth-child(4) a.nav-link.active ~ li:last-child:after{transform:translateX(0%)}
.sample .nav.nav-tabs li:last-
child:after {
content:'';width:100%;height:3px;background-
color:green;display:block;
bottom:-4px;
transform:translateX(0);
transition:all .5s linear
}
If I am using like below Code is working fine.
.sample-4.sample li:nth-child(1) ~ li:last-child:after{transform:translateX(-290%)}
.sample-4.sample li:nth-child(2) ~ li:last-child:after{transform:translateX(-104%)}
.sample-4.sample li:nth-child(3) ~ li:last-child:after{transform:translateX(-90%)}
.sample-4.sample li:nth-child(4) ~ li:last-child:after{transform:translateX(0%)}
You are trying to use the pseudo-class after without content. You must have content in order to render before or after to DOM.
Example:
li:last-child:after{
content: "";
width: 100px;
height: 120px;
display: block;
transform:translateX(-290%);
}
Also, don't forget to change display to block or inline-block. This way your dimensions (width, height, margin and padding) will take effect.
Related
Essentially I'm having an SVG icon fade out and reveal a link on hover but they're huge when I link them and look really bad.
I've tried using 'img' instead of 'a' but failed as they still would be way too big and width and height had no effect.
Also tried manually scaling them down in illustrator but that caused problems when changing the viewport size and they'd miss align themselves.
Fiddled with the problem for a while and as im pretty new to SVG's I ended up giving up and coming here.
It looks like this https://imgur.com/a/4c1KpHF
Hovering over the icons on the left causes them to fade out and the link fade in.
HTML:
<div class="list">
</div>
CSS:
.icon-HOME::before{
content: url(/icons/Home.svg);
filter: invert(100%);
transition: all 0.5s ease-in-out;
}
#nav_bar div a:first-child:after {
content: "HOME";
}
.icon-ABOUT::before{
content: url(./icons/About.svg);
filter: invert(100%);
transition: all 0.5s ease-in-out;
}
#nav_bar div a:first-child + a:after {
content: "ABOUT";
}
.icon-WORK::before{
content: url(./icons/Work.svg);
filter: invert(100%);
transition: all 0.5s ease-in-out;
}
#nav_bar div a:first-child + a + a:after {
content: "WORK";
}
.icon-CONTACT::before{
content: url(./icons/Contact.svg);
filter: invert(100%);
transition: all 0.5s ease-in-out;
}
#nav_bar div a:first-child + a + a + a:after {
content: "CONTACT";
}
#nav_bar div a:hover:after {
opacity: 1;
}
#nav_bar div a:hover:before {
opacity: 0;
}
Any other additional advice is greatly appreciated!! Thank you in advance to anyone that offers their help!
If your SVGs are local files, you can edit the SVG element attribute to reduce their widths/height.
e.g. <svg width="285" >
If you add just width the height should scale with it.
It wasn't clear if you've tried this only in CSS, but let me know if it works directly editing the SVG attribute.
You can try CSS transform with scale.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale
transform: scale(0.5);
or you can try max width too:
https://www.w3schools.com/cssref/pr_dim_max-width.asp
max-width: 150px;
So far only the middle slide has correct arrow pointing to the left on the left side and arrow pointing to the right on the right side. But i cannot manage to make when you are on either left or right slide the arrows to be pointing to the right way.
Thank you!
http://codepen.io/anon/pen/WvZGdb
HTML
<div id="slides">
<input type="radio" name="slider" id="slide1" class="set"/>
<input checked type="radio" name="slider" id="slide2" class="set"/>
<input type="radio" name="slider" id="slide3" class="set"/>
<div class="mask">
<div class="overflow">
<div class="slide"><img src="../images/work.png"/></div>
<div class="slide"><img src="../images/work.png"/></div>
<div class="slide"><img src="../images/work.png"/></div>
</div>
</div>
<div id="controls" onclick="">
<label for="slide1">1</label>
<label for="slide2">2</label>
<label for="slide3">3</label>
</div>
</div>
</div>
CSS
input.set {
display:none;
}
#slide1:checked ~ .mask .overflow { margin-left:0; }
#slide2:checked ~ .mask .overflow { margin-left:-640px; }
#slide3:checked ~ .mask .overflow { margin-left:-1280px; }
#slides {
margin:auto;
width:760px;
position:relative;
background-color:#096;
}
#slides .mask {
width:640px;
overflow:hidden;
margin:auto;
}
#slides .overflow {
width:300%;
-webkit-transition: ease-out 0.5s;
}
#slides .slide {
width: 640px;
height:480px;
float:left;
background: silver;
}
#controls label {
display:none;
width:60px;
height:60px;
opacity:0.5;
position:absolute;
top:50%;
margin-top:-30px;
cursor:pointer;
background:#0C0;
}
#controls label:hover {
opacity:1;
}
#slide1:checked ~ #controls label:nth-child(2), #slide2:checked ~ #controls label:nth-child(3), #slide3:checked ~ #controls label:nth-child(2) { right:0; display:block; }
#slide2:checked ~ #controls label:nth-child(1), #slide3:checked ~ #controls label:nth-child(2) { left:0; display:block; }
I don't know if I got you right but I can try. From what I read you want the arrow on the last slide to "shift" backward ("<").
There are few approaches to this solution.
First way
You add a class when it's on the last div and simply rotate if for 180 deg.
#slide3:checked ~ #controls label:nth-child(2) {
transform: rotate(180deg);}
Second way
As in the first way you add a class for this last scenario and you flip it with matrix.
#slide3:checked ~ #controls label:nth-child(2) {
transform: matrix(-1,0,0,1,0,0);}
Third way
For me maybe the best way. You can use :before and content:"" to a letter, icon or symbol to a label. So labels are empty and you "fill" them with before.
Browser Support
For the first two ways you need to use prefixes.
IE > 9 (IE 9 requires prefix)
Firefox > 3 ( FF < 15 requires prefix)
Chrome (Chrome < 35 requires prefix)
Safari (requires prefix)
Opera > 10 (Opera < 22 requires prefix)
For more info Can I use
I am a new HTML/CSS guy, and I want to learn HTML and CSS. Now I saw this wonderful website; when you hover over the about us tab in the menu there is an animation on the submenu. That's the animation that I tried re-creating.
Here's what I have tried: JS Fiddle.
Now, it all works fine, below is the CSS that actually does the trick:
.menu > li a:hover ~ .sub-menu{
display: block;
-webkit-animation-name: smallanim;
-o-animation-name: smallanim;
animation-name: smallanim;
-webkit-animation-duration: .5s;
-o-animation-duration: .5s;
animation-duration: .5s;
}
#keyframes smallanim {
0% {
transform:translateY(20px);
}
100% {
transform:translateY(0px);
}
}
It's .menu > li a:hover ~ .sub-menu this selection that basically does the trick. But is this the right way to do it? If you hover on the main menu the submenu appears, but then when you try hovering on the sub-menu, the menu disappears. Do I need to use jQuery?
You need to do
.menu > li:hover a ~ .sub-menu
instead of
.menu > li a:hover ~ .sub-menu
I want this div-container hidding (display:none) for 2 sec.
or if you have a better solution, please post it :)but please no jquery or javascript
#vcontainer {
height: 450px;
width: 100%;
background-color:black;
margin-top:10px;
margin-bottom:10px;
animation: vldng 4s;
-webkit-animation: vldng 4s;
display: none;
}
#keyframes vldng {
0%{display: none;}
50%{display: block;}
100%{display: block;}
}
#-webkit-keyframes vldng {
0%{display: none;}
50%{display: block;}
100%{display:block;}
}
I hope you can help me! :)
you can use Opacity instead of display.
but opacity=0 is different from display=none,
in both state you don't see anything.
opacity:0 make your element acting as a Place Holder, but display:none remove your element from view port.
I have the following issue. When I set CSS transition with transform (translateZ on hover) strange things start happening. If you just hover over the element it works as expected, but when you start quickly hovering on and off (in quick succession), transform starts breaking and the effect is multiplied (in the case of positive transformZ, the element will move "closer and closer" to you, even though it returns to the specified position few moments after).
Here is the code, HTML:
<div id="wrapper">
<ul>
<li></li>
</ul>
</div>
and CSS:
#wrapper {
perspective: 2000px;
}
ul li {
width: 200px;
height: 40px;
background: #0160ad;
transition: all 0.3s linear;
}
ul li:hover {
-webkit-transform: perspective(2000) translateZ(300px);
}
So am I doing something wrong here or it is just the way it is and has to be done some other way to prevent this from happening.
fiddle
When you are transitioning something, it is always a good idea to have the property set in both states. And, as similar as posible (keep unused properties the same).
So, set
ul li {
width: 200px;
height: 40px;
background: #0160ad;
transition: all 0.3s linear;
-webkit-transform: perspective(2000) translateZ(0px);
}
ul li:hover {
-webkit-transform: perspective(2000) translateZ(300px);
}
and it works ok: fiddle