Hide image with play button

HTML & CSS
1

The play image hides when I click it, how do I also have the image hide?

https://jsfiddle.net/075anu3x/

green image.

.video-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  border: 1px solid #333;
  pointer-events: none;
  background: url(https://i.imgur.com/ShS6nAO.png) no-repeat;
  background-size: contain;
  background-position: center;
}
2

You are still doing things without thinking about how they work.

You have a transition on the element when the slide class has been added but that is to late as there is no change from one thing to another. You also duplicate the content property when there is no need.

You need something like this:

.video-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  border: 1px solid #333;
  pointer-events: none;
  background: url(https://i.imgur.com/ShS6nAO.png) no-repeat;
  background-size: contain;
  background-position: center;
  transition: all 2s ease-in;/* transition needs to be on the default state for a transition to occur when the class is added and a property changed*/
  opacity:1;
}

.video-wrapper.slide::after {
  opacity:0;
  /*content: "";
  animation: border 1s ease-in 1 forwards;*/
  /*border: 1px solid #0059dd;
  transition: border 2s ease-in;*/
}

I don’t know what you were doing with the border but it would have no effect other than applying a border when the play button was clicked?

1 Like
3

Transition border is not working now?

How would I get that to work in he code?

https://jsfiddle.net/gfh1Lab9/1/

.video-wrapper.slide::after {
  opacity: 0;
  border: 1px solid #0059dd;
  transition: border 2s ease-in;
}
4

It makes no sense.

You are adding a border and then hiding the element?

Define what you want to happen first.

There was no transition on the border before anyway that I could see.

5

Here the 1px border changes from gray to blue after the play image is clicked. https://jsfiddle.net/075anu3x/

In the code you provided, it does not.

https://jsfiddle.net/gfh1Lab9/1/

6

You said you wanted to hide the green so I assumed you wanted to hide that element.

I’m not sure why you have an image for the green background but if it has to be an image then you can’t fade an image like you can a background-color. That’s why I just set the whole thing to opacity zero.

If you want the border to stay then you can hide the image but it will be instant unless you move the image to another element and then use opacity as I just showed.

7

What If I did this? https://jsfiddle.net/L8w6rhz4/

I added: background: unset;

.video-wrapper.slide::after {
  border: 1px solid #0059dd;
  transition: border 2s ease-in;
  /* add this */
  background: unset;
}

Is that good?

8

Background:transparent would be better as that’s the default but unset is ok. As I said though there will be no transition. It will just go instantly.

1 Like
9

The green was just being used as a placeholder image.

1 Like
10

If you want the image to fade out then you’ll need an extra element to hold the image at the end of video-wrapper as all the pseudo elements are already in use. You can then use opacity without losing the border.

1 Like
11

Thank you.

I’ve learned a lot from you over the past few days.

Hopefully I will remember it all, if not, I have posts here to come back to.

Thank you again.

1 Like
12

It’s nice to be appreciated. Thank you. :slight_smile:

1 Like
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.