Placing the red image under the blue one

asasass · May 19, 2024, 12:53pm

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

code

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;
}

PaulOB · May 19, 2024, 1:58pm

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?

asasass · May 19, 2024, 2:32pm

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?

asasass · May 19, 2024, 2:55pm

The code you gave me,

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

hgfjhf

PaulOB · May 19, 2024, 3:34pm

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?

asasass · May 19, 2024, 4:48pm

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");
    });

asasass · May 19, 2024, 6:47pm

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;
}

PaulOB · May 19, 2024, 6:52pm

asasass:

.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;
}

That can be changed to this:

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

asasass · May 19, 2024, 7:02pm

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.

asasass · May 19, 2024, 7:07pm

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.

PaulOB · May 19, 2024, 7:26pm

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.

system · August 19, 2024, 2:26am

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

Topic		Replies	Views
How do I center the image on the curtain? HTML & CSS	56	2187	August 21, 2024
Place an image OVER an image? HTML & CSS	5	56510	October 8, 2014
Image (in div) overlapping two divs HTML & CSS	7	18578	October 8, 2014
[SOLVED] How to place an image behind a div tag HTML & CSS	7	16158	October 12, 2016
Editing an image in CSS HTML & CSS	69	4045	March 16, 2018

Placing the red image under the blue one

Related topics