I have this :hover:
http://jsfiddle.net/andrewhoward_im/hLc42dw3/
<span id="pin1-content" class="pin-content">text</span>
It's working fine.
However, I've added it to a custom WordPress theme — http://www.letsgobucketlisting.com/ — and I can't seem to get it to work.
Maybe there are CSS rules in your website overriding your custom css rules, try this:
.pin-content {
position: absolute;
opacity: 0 !important;
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
transition: opacity 0.5s;
-webkit-transition: opacity 0.5s;
border-radius: 5px;
margin-left: -50px;
background-color:#333333;
color: #ffffff;
}
#pin1:hover + #pin1-content {
opacity: 1 !important;
}
WordPress has added a <br> between your anchor and the span...
So your adjacent sibling selector will not work.
#pin1:hover + #pin1-content {
opacity: 1;
}
Ive added a <br> to your fiddle so you can see the result.
http://jsfiddle.net/hLc42dw3/1/
Add your anchor and span on a single line or with a html comment between to prevent the additional line-break tags.
<!--
--><span id="pin1-content" class="pin-content">text</span>
Related
I've got a ::after element on label for a checkbox input.
Everything works on live-server in an editor, element is visible, :checked animation works, everything is ok.
I pushed the code on a repository on github and when I open the page, ::after element isn't showing up.
Here's HTML:
<li class="main__list-item">
<div class="main__list-item-container">
<input type="checkbox" id="question-1" class="main__list-question"></input>
<label for="question-1" class="main__label">How many team members can I invite?</label>
<p class="main__list-answer">You can invite up to 2 additional users on the Free plan.
There is no limit on team members for the Premium plan</p>
</div>
</li>
Here's CSS:
.main__label {
cursor: pointer;
font-size: 1.4rem;
color: var(--color-text-secondary);
transition: all 0.4s;
width: 100%; }
.main__label::after {
content: url("/img/icon-arrow-down.svg");
display: inline-block;
position: absolute;
right: 0;
transition: all 0.4s; }
.main__label:hover {
color: var(--color-text-main); }
.main__list-question {
appearance: none;
position: absolute;
right: 0;
cursor: pointer;
outline: none; }
.main__list-question:checked ~ .main__label::after {
transform: rotate(180deg); }
.main__list-question:checked ~ .main__list-answer {
display: block;
margin-top: 0.5em;
color: var(--color-text-tertiary);
animation: fadeIn 0.3s ease-in-out; }
.main__list-question:checked + .main__label {
font-weight: 700;
font-size: 1.4rem; }
even without visible ::after element, all animations work still, font-size changing, p element showing and etc.
This is from vs code live-server
This is from github page
the Problem ist the image Path:
you have to change the URL:
content: url(../img/icon-arrow-down.svg);
First off I would like to stay that I am new to HTML and CSS, so pardon me if the answer is obvious. I am completely confused as to what is going on right now with my CSS code. I designed a login page with an label text moving up a bit and changing color when the user clicks on the input element. Everything worked perfectly as intended. Now I am making a signup form using the same animations as the login page for consistency. However, for some strange reason, although I am using the same code (with the only difference being position type [login used absolute and signup uses relative], and more input elements), the movement transition doesn't work at all. The text still changes color, and the label element moves up immediately without the transition animation. Any ideas as to why this is occurring would be greatly appreciated.
If it helps, I took the idea from a youtube video: https://www.youtube.com/watch?v=eeHqZeJ9Vqc
All the input elements are following this layout:
.center-card {
margin: 3vh auto 0 auto;
width: 30%;
min-width: 30%;
height: 85vh;
background: white;
border-radius: 10px;
}
.form-wrap {
margin: 0 auto;
width: 90%;
min-width: 90%;
}
.form-wrap form {
width: 100%;
}
.form-wrap label {
font-size: 16px;
}
.signup-inputs {
border-bottom: 2px solid #adadad;
}
.signup-inputs input,
.signup-inputs select {
width: 100%;
padding: 0 5px;
font-size: 16px;
border: none;
background: none;
outline: none;
position: relative;
top: 2.3vh;
}
.signup-inputs label {
position: relative;
bottom: 1vh;
left: 0.5vh;
color: #adadad;
pointer-events: none;
/*transform: translateY(-50%);*/
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.inline-spacing {
width: 45%;
}
/* Container wrap for (decision maker and number of employees) and (email and phone number)*/
.decisionMaker-Employees,
.email-phone {
display: flex;
justify-content: space-between;
}
.password-margin {
margin-bottom: 3vh;
}
.signup-inputs span::before {
content: '';
width: 0%;
height: 0.3vh;
background: #2691d9;
position: relative;
top: 3.8vh;
display: flex;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
}
.signup-inputs input:focus~label,
.signup-inputs input:valid~label,
.signup-inputs select:focus~label,
.signup-inputs select:valid~label {
top: -4vh;
color: #2691d9;
}
.signup-inputs input:focus~span::before,
.signup-inputs input:valid~span::before,
.signup-inputs select:focus~span::before,
.signup-inputs select:valid~span::before {
width: 100%;
}
<div class="center-card">
<h1>Create an Account</h1>
<div class="form-wrap">
<form method="post">
<!-- Signup Name -->
<div class="signup-inputs">
<input type="text" id="name" name="name" required>
<span></span>
<label for="name">Name</label>
</div>
Your signup is probably not working due to the fact that you are using position: relative;
This type of positioning is probably the most confusing and misused. What it really means is “relative to itself”. If you set position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will have no effect on it’s positioning at all, it will be exactly as it would be if you left it as position: static; But if you do give it some other positioning attribute, say, top: 10px;, it will shift its position 10 pixels down from where it would normally be. I’m sure you can imagine, the ability to shift an element around based on its regular position is pretty useful. I find myself using this to line up form elements many times that have a tendency to not want to line up how I want them to.
There are two other things that happen when you set position: relative; on an element that you should be aware of. One is that it introduces the ability to use z-index on that element, which doesn’t work with statically positioned elements. Even if you don’t set a z-index value, this element will now appear on top of any other statically positioned element. You can’t fight it by setting a higher z-index value on a statically positioned element.
The other thing that happens is it limits the scope of absolutely positioned child elements. Any element that is a child of the relatively positioned element can be absolutely positioned within that block. This brings up some powerful opportunities which I talk about here.
Therefore, maybe try using the same position: absolute; on your signup as you did on your login.
As the title suggests. When I click on something, a class gets added to it with a border on the bottom. I just want that to fade in (and out if possible). I'm not sure if I need to do this with JS or if it can be done with CSS.
So far here's what I've tried - at least with CSS.
.selector {
width: auto;
height: 30%;
width: auto;
height: 50%;
margin-right: 5%;
}
/*TOGGLE CLASS*/
.active {
border-bottom: 1px #a0a0a0 solid;
transition: border-bottom 0.5s ease-in-out;
padding-bottom: 15px;
}
<span class="selector"
><a href="javascript:void(0)" onclick="quote(0)"
><img
src="..."
alt=""/></a
></span>
You can use the [transtion][1] property in CSS to set the transition-time (and other cool things).
In your case you can for example add a class. We can name it .transition-3s. Then in your CSS file you can declare this class as follows:
.transition-3s {
transition: 3s;
}
EDIT
Do not apply this on your .active class, as this will result in it only using transition when "deactivating" the toggle.
You can use inputs to do it. In this case, the best practice is to use a "checkbox" type and with the subclass of ":checked" you can use it like an added class, here you have the example of how it would look in your code:
#toggle {
display: none; //To hide it
}
#toggle:checked ~ span img { //select the element to toggle
//As you see, when you press the lable, this is triggered
border-bottom: 1px #a0a0a0 solid;
transition: border-bottom 0.5s ease-in-out;
padding-bottom: 15px;
}
.selector {
width: auto;
height: 30%;
width: auto;
height: 50%;
margin-right: 5%;
}
<input id="toggle" type="checkbox">
<label for="toggle">This is the text that will toggle the "class"</label>
<span class="selector">
<img src="..." alt="">
</span>
You can use the span as a label, just mess around with it.
And for animate it, just use the attribute transition to make it smooth:
#toggle:checked ~ span .active {
border-bottom: 1px #a0a0a0 solid;
padding-bottom: 15px;
//not in here
}
.active { //or img
transition: border-bottom 500ms ease-in-out; //use it here to make it more clear
}
Hope it helped, ask for any doubt.
For a web project, I would like to create an animated logo in the top left corner of a website. The logo should animate when the visitor is hovering over it, i.e. when not hovering, the logo should display the abbreviated version of the website's name and on hovering it should animate into the fully spelt out version of the name. Here's a quick demo was done in After Effects which shows what I would like to achieve:
The only time I have ever seen something like this was on this website http://ourplace.studio/, the site of a design studio called 'Our Place', in the top left corner. The logo animated pretty much the same way when hovering over it. But looking into the website's source I could not figure out how it is done. The logo is inside a <div> with an <a> tag which has been assigned a class called animation-link. That is as far as I got.
<div id="logo" class="lma">
<a href="http://ourplace.studio" class="animaition-link">
<span>Our</span> <span>Place</span>
</a>
</div>
It would be fantastic if someone could help me to figure this out. It would be a good learning experience to understand how something like this is done.
You can achieve this using css3 transitions:
transition: width 1s;
I made a fiddle that solves your task: https://jsfiddle.net/jmxLrq4m/
Note that this won't work with dynamic width (width: auto) as the transition needs a fixed start- and end value to animate through. Therefor I gave each span a class and set fixed widths on default and on hovering.
The transition attribute combines all transition-properties, which you could also separate e. g.
transition: width;
transition-duration: 1s;
...
See here for more information about transitions: https://www.w3schools.com/css/css3_transitions.asp
i have made a fiddle for you, i hope that works for you
<div id="logo" class="lma">
<a href="http://ourplace.studio" class="animsition-link">
<span>O<i>ur </i></span><span>P<i>lace</i></span>
</a>
</div>
div#logo a {
font-size: 40px;
color: #333;
text-decoration: none;
}
div#logo span {
transition: all .3s;
overflow: hidden;
display: inline-block;
float: left;
}
div#logo i{
font-style: normal;
max-width: 0;
overflow: hidden;
display: inline-block;
vertical-align: bottom;
transition: all 1s;
}
div#logo:hover i {
max-width: 200px;
}
Hi please check this demo here
https://jsfiddle.net/JentiDabhi/83auj9v8/
HTML:
<div id="logo">
<a href="#" class="animsition-link">
<span>Demo</span><span>Logo</span>
</a>
</div>
CSS:
#logo {
width:210px;
font-size: 40px;
}
#logo span {
display: inline-block;
float: left;
margin-right: 0;
overflow: hidden;
}
#logo span {
transition: all 1s ease 0s;
}
#logo span:nth-child(1) {
padding-top: 1px;
width: 28px;
}
#logo span:nth-child(2) {
padding-top: 1px;
width: 22px;
}
#logo:hover span:nth-child(1), .hmslider-visible #logo span:nth-child(1) {
padding-top: 1px;
width: 100px;
}
#logo:hover span:nth-child(2), .hmslider-visible #logo span:nth-child(2) {
padding-top: 1px;
width: 100px;
}
I basically want to create a button like the big "Download Bootstrap" button on this side: http://getbootstrap.com/
Note: I want to create the button myself just with css & html and not with the twitter-bootstrap framework
I was able to do it pretty well but then I noticed that there was a bug: http://jsfiddle.net/vk5DV/
If you zoom in while hovering over the button you will notice that in the corner of the button there is something wrong. I think the link itself gets styled with the white background but I have no idea why.
#googlink a {
color: white;
transition: all 0.2s linear 0s;
}
#googlink :hover {
background-color: white !important;
color: #99CC00;
}
why does the link get a white background too (and not only the button div)?
If a border-radius is added it seems ok
eg
#googlink :hover {
background-color: white !important;
border-radius: 6px;
color: #99CC00;
}
http://jsfiddle.net/f3kzb/show/
Although if you simplify it a bit, i think it works fine with the code you already have. Also specified as a class to be used with any link.
http://jsfiddle.net/fe25t/
html
<div id="green">
Google
</div>
css
body {
margin: 0;
padding: 0;
}
#green {
background-color: #99CC00;
}
a {
text-decoration: none;
color: black;
}
.special-link {
border-radius: 10px;
margin: 40px;
display: inline-flex;
height: auto;
width: auto;
font-size: 65px;
background-color: #99CC00;
border: 2px solid white;
color: white;
transition: all 0.2s linear 0s;
}
.special-link:hover {
background-color: white !important;
color: #99CC00;
}
Do not use a div, just style the link (a).
Currently you are styling both the link and the div, which is not necessary - this creates conflicts and, semantically, is useless.
You would want to use a div only if you needed to nest multiple elements within it and then position the div to position all the elements at once (just an example).
There you go.. check this out.. The hover border has to be round so that it does not overlap the normal border. This addition is under the hood of the main button border so it does not pop out at the corners.
#googlink :hover {
border-radius: 6px;
background-color: white !important;
color: #99CC00;
}
http://jsfiddle.net/47vDq/