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
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
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
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
Click on the links player:
http://testingplayers.blogspot.com/
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/
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.
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.
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).
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
But when I remove it from one, itās broken.