OnClick transition effects, and understanding the markup code

opacity: 0; VS. transparent

We had to use opacity to fade in/out the background IMAGE
Remember, transition does not work on background image

However, it does work on background colors
So, yes, you would get the same effect using background:transparent

So there is two ways to do it, either one is ok

1 Like

Then, how does the image fade in then out to the other image without transitioning to it?

Isnā€™t that a transition?

From one image to another?

The image does not move, we just made it invisible with opacity.
Then it shows the other image below it, itā€™s an illusion :slight_smile:

2 Likes

This would be the shorthand version
transition: 1s

of this?
transition: all 1s

Is this true?

In fact, the keyword value ā€œallā€ is the initial value for the transition-property property, so you could actually leave it out.

Yes, itā€™s true

But I left the keyword in there for you to learn what the code was doing.

Youā€™ve still got a lot to learn, but it is good to see you working some things out on your own :slight_smile:

You need to stay with the reference materials at MDN and work your way through them in the proper order.

Basics first
Then Intermediate
Advanced will take a LONG time

3 Likes

Click on the links player:
http://testingplayers.blogspot.com/

Iā€™m seeing this:

But it works fine on here:
https://jsfiddle.net/27jz1dzy/12/

Do you know what the issue is, and how I would fix it?

And it works fine on here:
http://testing45435.blogspot.com/

But itā€™s not working on here:
http://testingplayers.blogspot.com/

I fixed it.
http://testingplayers.blogspot.com/

I just reput in the code again and that worked.

Should this be using absolute or relative, and if it should be using absolute, how would I get it to work? The playbutton should not be visible on the image.

.playe {
  position: absolute;
  left: 6px;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;

https://jsfiddle.net/uf70rj0g/2/

.playe {
  position: relative;
  left: 6px;
  top: 2px;
  right: 0;
  bottom: 0;
  margin: auto;

Weā€™ve explained the difference between absolute and relative numerous times so you should have been able to make your own decision by now with a little thought.

In this case it doesnā€™t matter because the parent element is already out of the flow with absolute positioning and the child only has one element in place so whatever you use will not affect anything else.

I would use absolute positioning in order to use auto margins to centre it horizontally and vertically without guessing at offsets needed.

e.g.

.playe {
  position: absolute;
  left:0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index:-1;/* move it under the image*/
}

Weā€™ve already explained stacking levels and z-indexes for positioned elements so you should know that raising or a lowering a z-index will move an element up and down in its current context. Iā€™ve just used a negative z-index to move the play button behind the image.

4 Likes

I tried z-index:, just not -1

Are both of these supposed to have relative on them, and how come nothing plays when you click on the buttons?

.playButtonsc {
  position: relative;
  width: 260px;
  height: 44px;
  background-color: black;
  border: 3px solid #0059dd;
}

.playButtonc {
  position: relative;
  float: left;
  width: 83px;
  height: 44px;
  cursor: pointer;
  overflow: hidden;
}

Sometimes an element will be ā€œon top ofā€ another element and intercept the click event. Assuming the problem has to do with CSS and not broken JavaScript this trick I use often while designing can help you to see if thatā€™s the problem.

/* for troubleshooting CSS only */ 
* { 
  outline: solid 1px #F00; 
}

You can use whatever color would be distinct, but use outline so it wonā€™t add any dimensions.

2 Likes

What Iā€™m asking is, is a position supposed to be given to both of these elements.

Usually, isnā€™t it only one of them that gets relative, and the other one doesnā€™t get a position?


.playButtonsc {
  position: relative;
  width: 260px;
  height: 44px;
  background-color: black;
  border: 3px solid #0059dd;
}

.playButtonc {
  position: relative;
  float: left;
  width: 83px;
  height: 44px;
  cursor: pointer;
  overflow: hidden;
}

Does the code work correctly with position:relative assigned to both classes?

If it does, remove position:relative from one of them and testā€¦ see what happens.

Then restore the deleted position:relative and delete the other one and test again.

Look at what happens when you remove position: relative;
It breaksā€¦

I gave you the link so you could learn about the containing block but you seem to have no interest in learning.

This was all discussed in post #35

From the specsā€¦

If the position property is absolute, the containing block is formed by the edge of the padding box of the nearest ancestor element that has a position value other than static (fixed, absolute, relative, or sticky).

1 Like

What I want to know is, why is position relative required to be placed on both of them.

Because I donā€™t think it is required for both of them, and that Iā€™m doing something wrong.

The best way to answer that question is through testing as I described.

I just answered it in post #99

1 Like

But when I remove it from one, itā€™s broken.