OnClick transition effects, and understanding the markup code


#64

I put it at the bottom since it is essentially an empty div that is used for decoration only. It has no real content so it has no need to be part of the document flow.

It only contains pseudo elements and they are absolute positioned (removed from the page flow)

Yes, elements lower in the page source have a higher stacking order. If you don't want to deal with z-index you can move it to the top. That way it would not interfere with play buttons in some cases.

As you've seen though, there will be times you need z-index


#65

You don't need 2 pseudos for one vertical line, the use of ::before is enough

.color::before {
  content: "";
  position: absolute;
  top: 0;
  left: 86px;
  width: 88px;
  height: 100%;
  background: black;
}
.activated .color::before {
  display:none; /*remove on click*/
}

#66

Is there any possible way to do this, or it's not possible?

#62


#67

How would I do this, where cursor:pointer is only set on the image so that, after you click the image, it goes away?

https://jsfiddle.net/epgz7wp4/39/

.linkse::before {
  content: "";
  cursor: pointer;
}
.activated .linkse::before {
  cursor: none; /*remove on click*/
}

#68

You need to keep up with what's going on!
Those are NOT borders

They are pseudo elements at 3px wide with background colors
You must target the background

We had that working way back on post #4

EDIT:
I think I see what your saying now.
You want the borders & pseudo borders transitioning at a different speed than the background-position of the sprite

Then you would need to group your different delay speeds in one transition

.playButtonb {
   position: relative;
   width: 260px;
   height: 260px;
   cursor: pointer;   
   background: url("https://i.imgur.com/6wOeaWN.png") 0 0;
   border: 3px solid #0059dd;
   transition: background-position 2s, border 5s; /*group properties and speeds together*/
 }
 
 .playButtonb.activated {
   border: 3px solid #e77d19;
   background-position: 0 -260px;
 }
 
 .playButtonb::before,
 .playButtonb::after {
   content: "";
   position: absolute;
   top: 0;
   left: 83px;
   width: 3px;
   height: 100%;
   background: #0059dd;
   transition:background 5s;/*pseudo borders*/
 }
 
 .playButtonb::after {
   left: 174px;
 }
 
 .playButtonb.activated::before,
 .playButtonb.activated::after {
   background: #e77d19;
 }

#69

This works with the two lines going down:
transition-delay: 3s;

How would you add that effect to the border also?
transition-delay: border 3s;

https://jsfiddle.net/nkvf38r5/324/


#70

Transitions inherit to children so there was a little confusion going on with the background property. It was inheriting to the pseudo borders since they are really backgrounds.

It's best to group the transitions together and use the shorthand transition property, just use commas to separate the rules

See transition shorthand for detailed examples of grouping and the order of duration, function, delay

For example...

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* Apply to 2 properties */
transition: margin-right 4s, color 1s;

Now, with your code and the best I can understand what you are wanting try this and adjust to your liking...

 .playButtonb {
   position: relative;
   width: 260px;
   height: 260px;
   cursor: pointer;
   transition: background 2s 0s, border 3s 2s;
   /* border duration & delay must match ::pseudo background duration & delay below*/
   background: url("https://i.imgur.com/6wOeaWN.png") 0 0;
   border: 3px solid #0059dd;
 }
 
 .playButtonb.activated {
   border: 3px solid #e77d19;
   background-position: 0 -260px;
 }
 
 .playButtonb::before,
 .playButtonb::after {
   content: "";
   position: absolute;
   top: 0;
   left: 83px;
   width: 3px;
   height: 100%;
   background: #0059dd;
   transition: background 3s 2s; /* duration & delay must match border duration & delay above*/
 }

So this ...
transition: background 2s 0s, border 3s 2s;

would translate to...

background | with 2s duration | and 0s delay
border | with 3s duration | and 2s delay

Your pseudo :before and :after background duration & delay needs to be the same as the border duration & delay in the .playButtonb ruleset

EDIT: Comments added to the CSS


#71

I fixed it by removing cursor:pointer from linkse, and added it to initiale.
https://jsfiddle.net/epgz7wp4/66/


#72

I have this code here:
http://jsfiddle.net/g8p9pn1v/152/

.colors {
  height: 44px;
  width: 44px;
  border: 3px solid #0059dd;
  position: relative;
  background: #ffffff;
}

.colors::before,
.colors::after {
  content: '';
  position: absolute;
  top: 0;
  width: 14px;
  height: 44px;
}

.colors::before {
  left: 0;
  background-color: #00ffff;
}

.colors::after {
  right: 0;
  background-color: #ff00ff;
}

<div class="colors"></div>

How would I hook that up to:
https://jsfiddle.net/epgz7wp4/83/

The last link

 .linkse a:nth-of-type(15) {

 }

#73

I just did it.
https://jsfiddle.net/epgz7wp4/87/

.linkse a:nth-of-type(15) {
  height: 44px;
  width: 44px;
  border: 3px solid #0059dd;
  position: relative;
  background: #ffffff;
}

.linkse a:nth-of-type(15)::before,
.linkse a:nth-of-type(15)::after {
  content: '';
  position: absolute;
  top: 0;
  width: 14px;
  height: 44px;
}

.linkse a:nth-of-type(15)::before {
  left: 0;
  background-color: #00ffff;
}

.linkse a:nth-of-type(15)::after {
  right: 0;
  background-color: #ff00ff;
}

#74

Why is there white space at the end of this code?
I put the code in the same as the bottom.

198px
Is there a way to get it to work on 198px?
https://jsfiddle.net/wLdL4hsw/36/

198px
http://jsfiddle.net/g8p9pn1v/163/

I think it has something to do with this code that is interfering with it.

.playButtona::before,
.playButtona::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}
.playButtona::after {
  left: 399px;
}

#75

Look at this:
https://jsfiddle.net/wLdL4hsw/136/

.playButtona::before,
.playButtona::after {
  content: "";
  position: absolute;
  background: #0059dd;
}

.playButtona::after {
}

#76

How do I add this code:

.playButtona::before,
.playButtona::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.playButtona::after {
  left: 399px;
}

Back into here:
https://jsfiddle.net/wLdL4hsw/136/

So the lines are over both images.


#77

Fixed:
https://jsfiddle.net/wLdL4hsw/153/

.playButtona {
  position: relative;
  width: 600px;
  height: 44px;
  cursor: pointer;
  border: 3px solid #0059dd;
}

.playButtona.active {
  background: #ffffff;
}

.playButtona.active::before,
.playButtona.active::after {
  content: "";
  position: absolute;
  width: 198px;
  height: 44px;
}

.playButtona.active::before {
  left: 0;
  background-color: #00ffff;
}

.playButtona.active::after {
  right: 0;
  background-color: #ff00ff;
}

.lines::before,
.lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.lines::after {
  left: 399px;
}

#78

How would I include this code in with the transition, removing display:none; ?

So the whole thing transitions together.

With display none, that removes it right away, and there's no transition.

I'm actually confused on this one, can you add a transition, from something, to none?

I'm stuck on this one.
https://jsfiddle.net/m3kcvyq2/25/

.color::before {
  content: "";
  position: absolute;
  top: 0;
  left: 86px;
  width: 88px;
  height: 100%;
  background: black;

}

.activated .color::before {
  display:none; /*re
  move on click*/
}

#79

Something like this, testing it.

Can you add a transition, from something, to none?
https://jsfiddle.net/m3kcvyq2/47/

.color::before {
  content: "";
  position: absolute;
  top: 0;
  left: 86px;
  width: 88px;
  height: 100%;
  background: black;
  transition: all 5s;
}

.activated .color::before {
  display:none; /*re
  move on click*/
}

#80

That's the one using opacity for the fade in effect.
You need to do the same using opacity, instead of removing it with display:none

But you need to reverse the opacity values around for fade out

Try this...

.color::before {
  content: "";
  position: absolute;
  top: 0;
  left: 86px;
  width: 88px;
  height: 100%;
  /*transitions*/
  background: black;
  opacity: 1;
  transition: all 2s;
}
.activated .color::before {
  opacity: 0; /*for fade out effect*/
  background: transparent; /*remove background color*/
}

#81

I don't think this is needed:
background: transparent; /*remove background color*/

Would I be right?
https://jsfiddle.net/us5x4r5b/4/


#82

Yeah, it looks like you can do away with it.

Had that in there before I reversed the opacity values


#83

I see it would work like this too:
https://jsfiddle.net/k8L4vgg8/5/

.activated .color::before {
  background: transparent;
}