Question 221949 in CSS Question posted in
Some basic documentation can be found here.

Css – I want to add delay content before and after I hover an overlay

When I hover a div, I wanted to have an overlay that slide from left to right, and then the content would visible after 1s delay. This is my HTML code:

/* overlay */

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}

.dv-each:hover .overlay {
  /* transition-delay: 0.4s; */
  transition: .5s ease-in-out;
  width: 100%;
}

.overlay-content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
<div class="col-12 col-md-5 col-lg-4 p-0 m-1 dv-each position-relative h-75">
  <a href="{{ route('xdsoft.tintuc')}}">
    <img src="{{ asset('image/TrangChu/rectangleLogo4.png') }}" class="img-fluid w-100" alt="...">
    <div class="overlay">
      <div class="text w-100 h-100 overlay-content px-3 py-4">
        <div class="fs-4">
          {{-- Some text --}}
        </div>
        {{--
        <div style="display: flex; justify-content: flex-end;">
          <a href="{{ route('xdsoft.thietke')}}">
            <div class="bg-145982 text-white p-2">Xem thêm</div>
          </a>
        </div> --}}
      </div>
    </div>
  </a>
</div>

As you can see, when I hover the image, the white background will slide and the content inside just visible. I want to make it delay for 1s. Can you help me? Thanks.

Tags:

2

Answers


  1. 0

    I hope this is what you are looking for.

    Please change the URL of the Photo. I have used one from the Internet.

    Modified Code
    With my understanding you will need jsfor it. I dunno if this is what you wnat

    let timer;

function hideContent() {
  const content = document.querySelector('.overlay-content');
  const background = document.querySelector('.overlay-background');

  content.style.opacity = '0';
  timer = setTimeout(() => {
    background.style.backgroundColor = 'rgba(255, 255, 255, 0)';
    background.style.opacity = '0';
  }, 1000);
}

function showContent() {
  clearTimeout(timer);
  const content = document.querySelector('.overlay-content');
  const background = document.querySelector('.overlay-background');

  background.style.backgroundColor = 'rgba(255, 255, 255, 0.9)';
  background.style.opacity = '1';
  content.style.opacity = '1';
}
      .overlay {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .overlay-background {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0);
    width: 100%;
    height: 100%;
    transition: background-color 0.5s ease, opacity 1s 1s ease;
    /* Delay the opacity transition */
  }

  .dv-each:hover .overlay-background {
    background-color: rgba(255, 255, 255, 0.9);
    opacity: 1;
  }

  .overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
    /* Ensure the content doesn't interfere with hover */
  }

  .dv-each:hover .overlay-content {
    opacity: 1;
    pointer-events: auto;
    /* Allow interactions with the content when hovering */
  }
    <div class="col-12 col-md-5 col-lg-4 p-0 m-1 dv-each position-relative h-75" onmouseenter="showContent()" onmouseleave="hideContent()">
  <a href="{{ route('xdsoft.tintuc')}}">
    <div class="overlay">
      <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg" class="img-fluid w-100" alt="...">
      <div class="overlay-background"></div>
      <div class="overlay-content px-3 py-4">
        <div class="fs-4">
          Text Displayed after Delay
        </div>
        <div style="display: flex; justify-content: flex-end;">
          <a href="{{ route('xdsoft.thietke')}}">Text Displayed after Delay
            <div class="bg-145982 text-white p-2"></div>
          </a>
        </div>
      </div>
    </div>
  </a>
</div>
      .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
  transition-delay: 1s;
  /* Set Delay Duration */
}

.dv-each:hover .overlay {
  transition: .5s ease-in-out;
  width: 100%;
  transition-delay: 0s;
}

.overlay-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 1s ease;
  .dv-each:hover .overlay-content {
    opacity: 1;
  }
    <div class="col-12 col-md-5 col-lg-4 p-0 m-1 dv-each position-relative h-75">
  <a href="{{ route('xdsoft.tintuc')}}">
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg" class="img-fluid w-100" alt="...">
    <div class="overlay">
      <div class="text w-100 h-100 overlay-content px-3 py-4">
        <div class="fs-4">
          Text Displayed after Delay
        </div>
        <div style="display: flex; justify-content: flex-end;">
          <a href="{{ route('xdsoft.thietke')}}">Text Displayed after Delay
                                <div class="bg-145982 text-white p-2"></div>
                              </a>
        </div>
      </div>
    </div>
  </a>
</div>
    Login or Signup to reply.
  2. 0

    Think of your background image, your overlay and your overlay content as three independent layers which stack on top of each other. Then code it that way.

    In your :hover rules, set the transition-delay to the delay you want when the hover begins, then in your base rules set the transition-delay to the delay you want when the hover ends.

    .d1 {
  position: relative;
  height: 100px;
  margin-bottom: 20px;
}
.i1, .overlay, .content {
  position: absolute;
}
.i1, .overlay {
  top: 0;
  left: 0;
  height: 100%;
}
.i1 {
  width: 100%;
  object-fit: cover;
  object-position: center;
}
.overlay {
  width: 0;
  background-color: rgba(255, 255, 255, 0.9);
  transition: .5s .5s ease; /* delay when overlay is removed */
}
.d1:hover .overlay {
  width: 100%;
  transition: .5s ease; /* no delay when overlay is added */
}
.content {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  opacity: 0;
  transition: .5s ease; /* no delay when content is removed */
}
.d1:hover .content {
  opacity: 1;
  transition: .5s .5s ease; /* delay when content is added */
}
    <div class="d1">
  <img class="i1" src="https://picsum.photos/1000/200">
  <div class="overlay"></div>
  <div class="content">Content appears</div>
</div>

<div class="d1">
  <img class="i1" src="https://picsum.photos/1000/200">
  <div class="overlay"></div>
  <div class="content">Content appears</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search