Placing the red image under the blue one

What is the best way for this to be written where the blue heart fades in over the red one?

code

https://jsfiddle.net/7mgz1ax2/

img22

Should I not have done this?

I’m confused on how to do this.

.heart-piece-0,
.heart-piece-a{
  left: 0;
  height: 30px;
  top: -15px;
  background-color: #0059dd;
}

css


.heart {
  position: relative;
  width: 138px;
  height: 33px;
  opacity: 0;
}

.heartb {
  position: relative;
  width: 138px;
  height: 33px;

}
[class*="heart-piece-"] {
  position: absolute;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
}

.heart-piece-0,
.heart-piece-a{
  left: 0;
  height: 30px;
  top: -15px;
  background-color: #0059dd;
}

.heart-piece-1,
.heart-piece-b{
  left: 16px;
  height: 60px;
  top: -31px;
  background-color: #0059dd;
}

.heart-piece-2,
.heart-piece-c{
  left: 32px;
  height: 80px;
  top: -37px;
  background-color: #0059dd;
}

.heart-piece-3,
.heart-piece-d{
  left: 48px;
  height: 90px;
  top: -31px;
  background-color: #0059dd;
}

.heart-piece-4,
.heart-piece-e{
  left: 64px;
  height: 94px;
  top: -23px;
  background-color: #0059dd;
}

.heart-piece-5,
.heart-piece-f{
  left: 80px;
  height: 90px;
  top: -31px;
  background-color: #0059dd;
}

.heart-piece-6,
.heart-piece-g{
  left: 96px;
  height: 80px;
  top: -37px;
  background-color: #0059dd;
}

.heart-piece-7,
.heart-piece-h{
  left: 112px;
  height: 60px;
  top: -31px;
  background-color: #0059dd;
}

.heart-piece-8,
.heart-piece-i{
  left: 128px;
  height: 30px;
  top: -15px;
  background-color: #0059dd;
}

.heart-piece-a {
  background-color: red;
}

.heart-piece-b {
  background-color: red;
}

.heart-piece-c {
  background-color: red;
}

.heart-piece-d {
  background-color: red;
}

.heart-piece-e {
  background-color: red;
}

.heart-piece-f {
  background-color: red;
}

.heart-piece-g {
  background-color: red;
}

.heart-piece-h {
  background-color: red;
}

.heart-piece-i {
  background-color: red;
}

html

              <div class="heart ">
                <div class="heart-piece-0"></div>
                <div class="heart-piece-1"></div>
                <div class="heart-piece-2"></div>
                <div class="heart-piece-3"></div>
                <div class="heart-piece-4"></div>
                <div class="heart-piece-5"></div>
                <div class="heart-piece-6"></div>
                <div class="heart-piece-7"></div>
                <div class="heart-piece-8"></div>
              </div>
              <div class="heartb ">
                <div class="heart-piece-a"></div>
                <div class="heart-piece-b"></div>
                <div class="heart-piece-c"></div>
                <div class="heart-piece-d"></div>
                <div class="heart-piece-e"></div>
                <div class="heart-piece-f"></div>
                <div class="heart-piece-g"></div>
                <div class="heart-piece-h"></div>
                <div class="heart-piece-i"></div>
              </div>

Here I put it back this way: https://jsfiddle.net/690g4psd/

.heart-piece-a {
  left: 0;
  height: 30px;
  top: -15px;
  background-color: red;
}

.heart-piece-b {
  left: 16px;
  height: 60px;
  top: -31px;
  background-color: red;
}

.heart-piece-c {
  left: 32px;
  height: 80px;
  top: -37px;
  background-color: red;
}

.heart-piece-d {
  left: 48px;
  height: 90px;
  top: -31px;
  background-color: red;
}

.heart-piece-e {
  left: 64px;
  height: 94px;
  top: -23px;
  background-color: red;
}

.heart-piece-f {
  left: 80px;
  height: 90px;
  top: -31px;
  background-color: red;
}

.heart-piece-g {
  left: 96px;
  height: 80px;
  top: -37px;
  background-color: red;
}

.heart-piece-h {
  left: 112px;
  height: 60px;
  top: -31px;
  background-color: red;
}

.heart-piece-i {
  left: 128px;
  height: 30px;
  top: -15px;
  background-color: red;
}

If you want them on top of each other then you will have to use position: absolute.

I’m not sure if this was what you were attempting though.

.heart{
  width: 138px;
  height: 33px;
  opacity: 0;
}


.heartb{
  position: absolute;
  width: 138px;
  height: 33px;
  margin:auto;
  
}

.heart.visible {
  opacity: 1;
  position:absolute;
  z-index:2;
}

Of course if that’s what you wanted then why didn’t you just fade the red background to blue. No need to put anything on top just use the same element?

why didn’t you just fade the red background to blue. No need to put anything on top just use the same element?

That can be done without make any changes to the javascript?

The code you gave me,

After I click the exit/close button: https://jsfiddle.net/7zarqxhj/
How is that fixed?

hgfjhf

I;m not sure what you are trying to do but you can reverse the positions to bring it back to the centre.

e.g. from this fiddle

.heart{
  position: absolute;
  margin:auto;
  width: 138px;
  height: 33px;
  opacity: 0;
}


.heartb{
  position:relative;
  width: 138px;
  height: 33px;
  margin:auto;  
}

.heart.visible {
  opacity: 1;
  z-index:2;
}

I would think that you just set an animation on the heart.visible to fade from red to blue.

Do you have an example with only one heart on the page?

Here it is working: https://jsfiddle.net/4pyd3hou/

Now, with one heart on the page, see, the first one uses transition on the heart, so, the js for that would have to be changed around.

.video-containerA .heart,
.inner-modalB .heart {
  transition: opacity 3s ease-in 1.5s;
}

@keyframes fadeInHeart {
  to {
    opacity: 1;
  }
}

.video-containerB .heart,
.video-containerC .heart {
  animation: fadeInHeart 3s ease-in 1.5s forwards;
}

I think I did that here? https://jsfiddle.net/4pyd3hou/2/

What else would I do?

/*.video-containerA .heart,
.inner-modalB .heart {
  transition: opacity 3s ease-in 1.5s;
}*/
@keyframes fadeInHeart {
  to {
    opacity: 1;
  }
}
.video-containerA .heart,
.video-containerB .heart,
.video-containerC .heart {
  animation: fadeInHeart 3s ease-in 1.5s forwards;
}
    // Make the heart piece visible
    //heartPiece.classList.add("visible");

    // Add event listener to the heart piece
    heartPiece.addEventListener("animationend", function () {
        container.classList.add("slide");
    });

Like this?
https://jsfiddle.net/pe6sybh5/2/

@keyframes colorChange {

  0%,
  50% {
    background-color: gray;
  }

  100% {
    background-color: #0059dd;
  }
}

.heart-piece-0,
.heart-piece-1,
.heart-piece-2,
.heart-piece-3,
.heart-piece-4,
.heart-piece-5,
.heart-piece-6,
.heart-piece-7,
.heart-piece-8 {
  animation: colorChange 3s ease-in-out forwards;
}
1 Like

That can be changed to this:

.heart > div {
  animation: colorChange 3s ease-in-out forwards;
}
1 Like

Why?

I would do that because?

From ai:

The selector .heart > div will select all direct child div elements of any element with the class .heart . This is a more efficient way to apply the same styles to multiple elements.

Less code also.

1 Like

Should this be relative or absolute

.heart {
  position: ;
  width: 138px;
  height: 33px;
}

Ai:

In your CSS, the .heart class is nested within the .flex-container class, which has position: absolute;. This means that the .heart class is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport), which is .flex-container.

If you want the .heart class to be positioned relative to the .flex-container, you should use position: relative;. This will make the position of the .heart class relative to its normal position.

However, if you want the .heart class to be positioned relative to the viewport, you should use position: absolute;. This will ignore the normal position of the .heart class and position it relative to the nearest positioned ancestor. If no positioned ancestors exist, it will position it relative to the viewport.

Which would you use there?

AI:

In this specific case, I would recommend using position: absolute; for the .heart class. Here’s why:

The .heart class is a child of the .flex-container class, which is already positioned absolutely. This means that the .heart class will be positioned relative to the .flex-container, not the entire page.

Using position: absolute; allows the .heart class to be positioned independently of other elements, which can be useful if you want to place it precisely within the .flex-container.

Do you agree?

html:

   <div class="outer-containerA">
      <div class="video-containerA">
        <button class="exitA" type="button" title="Exit" aria-label="Exit"></button>
        <div class="ratio-keeper ">
          <div class="video playA"></div>
          <div class="curtain ">
            <div class="flex-container ">
              <div class="heart ">
                <div class="heart-piece-0"></div>
                <div class="heart-piece-1"></div>
                <div class="heart-piece-2"></div>
                <div class="heart-piece-3"></div>
                <div class="heart-piece-4"></div>
                <div class="heart-piece-5"></div>
                <div class="heart-piece-6"></div>
                <div class="heart-piece-7"></div>
                <div class="heart-piece-8"></div>
              </div>

css:


.outer-containerA,
.outer-containerB,
.modalA,
.modalB {
  display: flex;
  position: fixed;
  inset: 0;
  overflow: auto;
  /* Enable scroll if needed */
}

.video-containerA,
.video-containerB,
.video-containerC,
.inner-modalB {
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  position: relative;
}

.flex-container {
  position: absolute;
  inset: 0 0 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.heart {
  position: ;
  width: 138px;
  height: 33px;
}
[class*="heart-piece-"] {
  position: absolute;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
}

from ai:

  • If you want the .heart class to move along with the .flex-container when it’s moved or resized, then position: relative; would be the better choice. This is because position: relative; positions the element relative to its normal position, keeping the element in the flow of the document. So, if the .flex-container moves, the .heart moves with it.
  • On the other hand, if you want the .heart class to stay at the same position even when other elements are moved or resized, then position: absolute; would be the better choice. This is because position: absolute; positions the element relative to the nearest positioned ancestor, taking the element out of the document’s normal flow. So, if other elements move or change, the .heart stays at the same position.

Another ai:

Based on the provided code snippet, the .heart class should have a position: relative; value. This is because the .heart element is a child of the .flex-container element, which has a position: absolute; value. When an element has position: absolute;, its child elements with position: relative; will be positioned relative to the parent element. In this case, the .heart element should be positioned relative to the .flex-container element.

It makes no difference as long as its one or another.

The flex from the parent will centre it regardless if its relative or absolute.

  display: flex;
  justify-content: center;
  align-items: center;

I would use relative as it doesn’t need to be absolutely positioned unless you want more items on top.

1 Like