Adjusting Animation Timing for Hovering over Div Elements

I'm struggling to maintain the rollover image (e.g. .rolled-thumb-1) displayed after rolling off the image thumbs. I expected it to work using the transition delay property just like in this demo, but unfortunately, that's not happening. When rolling over the thumbs, an absolutely positioned div is created instead of replacing the initial large image's background image.

The relevant selector for this issue is:

.rolled {
  transition: background-image .1s 604800s;
  background-size: cover;
}

And when hovering over, let's say the first thumb:

#thumb-1:hover .rolled-thumb-1 {
  background-image: url('https://cml.sad.ukrd.com/image/394545.jpg');
  transition: background-image 0s;
  transition-delay: 0s;
}

I've tried rearranging the transition and transition-delay rules as suggested in similar posts, but it hasn't helped. Uncommenting the transparent line as mentioned above results in only one image working, and then it doesn't change back and only one works. It seems like there may be an issue with having nothing to transition initially, as it does somewhat transition when the BG image was present, although not correctly.

If anyone has any insights or suggestions, please share. An explanation of where I might be going wrong would be greatly appreciated. Thank you for your assistance.

<!-- CSS code block here -->
<!-- HTML code block here -->

UPDATE This is a different issue from my previous post; the solution provided previously doesn't apply here. I'm not trying to spam; I genuinely need help figuring out how to solve this problem.

htmlcss

Answer №1

/* custom styles for images */
#main-image { background-image: url('https://cml.sad.ukrd.com/image/661835.jpg') }
#thumb-1 { background-image: url('https://cml.sad.ukrd.com/image/394545.jpg') }
#thumb-2 { background-image: url('https://cml.sad.ukrd.com/image/572806.jpg') }
#thumb-3 { background-image: url('https://cml.sad.ukrd.com/image/486757.jpg') }
#thumb-4 { background-image: url('https://cml.sad.ukrd.com/image/612357.jpg') }
/* custom styles for images */


* {
  margin: 0;
  padding: 0;
  font-family: arial;
  line-height: 1.5em;
  box-sizing: border-box;
}
#images-and-hook-container {
  width: 100%;
  height: auto;
  float: left;
  background: cyan;
  display: flex; /* allows hook container to be full height */overflow: hidden;
  position:relative;
}
#hook-container {
  background: blue;
  float: left;
  width: 33%;
  height: auto;
  padding: 3% 0 0 3%;
  position: absolute;
  height: 100%;
  right: 0;
  top: 0;
}
#images-wrap {
  width: 67%;
  height: auto;
  float: left;
  position: relative;
}
#main-image {
  width: 79%;
  float: left;/*
  background-size: cover !important;
  background-position: center center !important;*/
  height: auto;
  width: 100%;
  padding-bottom: 52.666%;
  background-size: contain;
  background-position: left top;
  background-repeat: no-repeat;
  position: relative;
}
#image-thumbs {
  width: 19%;
  float: left;
  margin-left: 2%;
  position: absolute;
  right: 0;
  height: 100%;
  overflow-x: visible !important;
  overflow-y: visible !important;
}
.image-thumb {
  margin-bottom: 4%;
  background-position: center center;
  background-size: cover;
  width: 100%;
  height: auto;
  padding-bottom: 66.666%;
}
.image-thumb:last-of-type { margin-bottom: 0 }
.image-thumb:hover { cursor: pointer }


@media (max-width: 768px) {

  body { background: red }

  #images-and-hook-container {
    flex-direction: column;
  }

  #images-wrap {
    position: static;
    width: 100%;
  }
  #hook-container {
    width: 100%;
    padding: 3% 0;
    position: static;
  }
  #main-image {
    width: 100%;
    padding-bottom: 66.666%;
    padding-bottom: 84.333%; /* 125*2/3 (+1 for margin bottom) */
  }
  #image-thumbs {
    width: 100%;
    margin-left: 0;
    top: 0;
    left: 0;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
  .image-thumb {
    float: left;
    margin-bottom: 6px;
    width: 24.333%;
    padding-bottom: 16.666%;
    flex: 1 0 24.333%;
    margin-left: 1%;
  }
  .image-thumb:first-of-type { margin-left: 0 }

  #aspect-ratio-wrap {
    float: left;
    width: 100%;
    height: auto;
    padding-bottom: 16.666%;
    background: orange;
    position: absolute;
    bottom: 0;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
  #main-image-area {
    position: absolute;
    left: 0;
    top: 0;
    background: transparent;
    width: 100%;
    height: 79%;
    z-index: 99;
  }
}


#thumb-1, #thumb-2, #thumb-3, #thumb-4 {position:relative}
.rolled-thumb-1, .rolled-thumb-2, .rolled-thumb-3, .rolled-thumb-4 {
  position: absolute;
  background: pink;
  width: 411%;
  height: 400%;
  top: -406%;
  z-index: 9;
  opacity: 0;
  transition: opacity 1s 3s ease;
  background-color: transparent;
 }
.rolled-thumb-2 {left:-104%}
.rolled-thumb-3 {left:-208%}
.rolled-thumb-4 {left:-312%}
.rolled {
  background-size: cover;
  /* background-image: url('https://cml.sad.ukrd.com/tp/3x2/'); */
}
#thumb-1:hover .rolled-thumb-1 {
  opacity: 1;
  transition: opacity 1s 0s ease;
}
#thumb-2:hover .rolled-thumb-2 {
  opacity: 1;
  transition: opacity 1s 0s ease;
}
#thumb-3:hover .rolled-thumb-3 {
  opacity: 1;
  transition: opacity 1s 0s ease;
}
#thumb-4:hover .rolled-thumb-4 {
  opacity: 1;
  transition: opacity 1s 0s ease;
}
.rolled-thumb-1 {
  background-image: url('https://cml.sad.ukrd.com/image/394545.jpg');
}
.rolled-thumb-2 {
  background-image: url('https://cml.sad.ukrd.com/image/572806.jpg');
}
.rolled-thumb-3 {
  background-image: url('https://cml.sad.ukrd.com/image/486757.jpg');
}
.rolled-thumb-4 {
  background-image: url('https://cml.sad.ukrd.com/image/612357.jpg');
}

@media (min-width: 768px) {
  .rolled-thumb-1, .rolled-thumb-2, .rolled-thumb-3, .rolled-thumb-4 {
    width: 414.5%;
    height: 416%;
    top: 0;
    left: -425%;
  }
  .rolled-thumb-2 { top: -106% }
  .rolled-thumb-3 { top: -212% }
  .rolled-thumb-4 { top: -318% }
  #main-image-area {
    position: absolute;
    left: 0;
    top: 0;
    background: transparent;
    width: 79%;
    height: 100%;
    z-index: 99;
  }
}
<div id='images-and-hook-container'>
  <div id="images-wrap">
    <div id="main-image"><div id='main-image-area'></div>
      <div id='aspect-ratio-wrap'>
        <div id="image-thumbs">
          <div class="image-thumb" id="thumb-1"><div class='rolled rolled-thumb-1'></div></div>
          <div class="image-thumb" id="thumb-2"><div class='rolled rolled-thumb-2'></div></div>
          <div class="image-thumb" id="thumb-3"><div class='rolled rolled-thumb-3'></div></div>
          <div class="image-thumb" id="thumb-4"><div class='rolled rolled-thumb-4'></div></div>
        </div>
      </div>
    </div>
  </div>
  <div id='hook-container'>
    <span>Summary</span>
    <ul>
      <li>key selling point</li>
      <li>key selling point</li>
      <li>key selling point</li>
    </ul>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to display or conceal form controls when altering select box choices

In my HTML, I have two select boxes: the first for Country and the second for City. The requirement is to display a textbox when a user selects a country other than Pakistan and show a dropdown list for city if the user selects Pakistan from the country dr ...

javascriptjqueryhtmlcss

What could be causing the unexpected white gap within my div element even though I've adjusted its dimensions to be minimal?

<div style=" height:0; width: 0 ; border: 1px solid black ; "> This code snippet displays a div element with a specified height, width, and border color. However, there seems to be an issue with the rendering as some st ...

htmlcss

Centered item in Bootstrap navbar with others aligned to the right

Experimenting with ReactJS and Bootstrap 4 to create a customized NavBar. Seeking guidance on aligning elements in the NavBar, such as centering some and placing others on the right side. Particularly interested in positioning the logout icon on the righ ...

htmlcssreactjsbootstrap-4

Can someone assist me with positioning an HTML child element to appear behind a parent element using CSS?

I need help displaying an HTML element behind a fixed header in my webpage. I want the div element (which is a child of the header) to appear beneath the header like a dropdown menu. However, I've tried adjusting the z-index and position properties wi ...

htmlcss

Parsing HTML in PHP from a specified URL

I am a newcomer to PHP and have been trying to parse HTML with it. Despite my efforts, I have not been able to get any examples to work. I attempted using the "SimpleHTMLDom" library but am willing to try anything as long as clear instructions are provided ...

phphtmlparsing

Troubleshooting: How to Fix Missing Sum Display in HTML Input Fields

I am new to the world of website programming and I am currently working on creating a basic sum equation using two input fields from the client-side. <!DOCTYPE html> <html> <head> </head> ...

javascripthtmlinputalerthtml-input

How can I maintain code reusability while customizing buttons with pseudo-elements to display unique content on each button?

I have a ul in my HTML with lis that contain navigation options such as home, contact, about, etc. I am trying to figure out the best way to add a unique effect to each button since they all have different content and require different icons. Essentially, ...

css

Ways to determine if a new set of input values duplicates previous rows in an array

My form has an array of input fields. Is there a way to validate each row's inputs and ensure that they all have at least one unique value in any field, preventing identical rows? For example, the 2nd row should only be allowed to have a maximum of ...

javascripthtmlarraysvue.js

Ways to Resolve Issues with WordPress Update and Publish Failures

It has been quite some time since Gutenberg was introduced to us, and it seems like we all have a complicated relationship with it. Navigating the Block editor to create a post or page can be challenging, especially when it used to be so simple. But what& ...

phphtmlcsssqlwordpress

How can I focus on a particular P element within this Div using CSS?

I am attempting to target a paragraph element within the code snippet below. I want to create a class that applies text-shadow to the text of that specific paragraph. However, I am unsure which class to focus on and what the correct syntax should be. I in ...

htmlcss

After showcasing every photo in the album, remember to include a line break

I am currently using the Flickr API to fetch images and display them on my website. The issue I am facing is that after displaying all the photos of each album, there needs to be a line break so that the name of the next album is displayed on the next line ...

javascripthtmljquerycssflickr

Delving into the concept of the last-child element

Looking for assistance with selecting the final EC_MyICHP_Item from an HTML structure: <div class="decorator"> <div class="EC_MyICHP_Item"> <div class="text"> <h3><a target="_blank" title="" href="#">& ...

cssjquery-selectorscss-selectors

What is the most effective way to align Django form CharFields side by side on a single line?

Currently, I am utilizing the Django Form class to construct a form. My goal is to have each CharField field occupy its own row, with the exception of certain ones that I want to share a row. The following are the CharFields I am currently working with: c ...

pythonhtmlcssdjangoforms

The Navbar design in Bootstrap is not scaling properly with the background image, making

I am currently in the process of developing a Bootstrap 5 webpage based on a provided design, but I am encountering some challenges. Here is the design I am working from: https://i.sstatic.net/MsFzq.jpg Here is my current progress: https://i.sstatic.ne ...

cssbootstrap-5

Tips for utilizing javascript to reset the heightline of the preceding keyword during a keyword search

Using JavaScript, I have implemented a search keyword function that highlights specific words in a paragraph. However, I am facing an issue. Currently, when searching for the next keyword, the previously highlighted text remains in red instead of reverting ...

javascripthtmljquerycss

I'm looking to display just the most recent post on the main page

Having trouble displaying only the most recent post on the main page instead of looping through all posts. Any help would be appreciated. Here is the view.py: def index(request): context = { 'infos': info.objects.all(), } ret ...

pythonhtmldjango

What is preventing my JavaScript from loading on my website when using window.onload?

I'm currently in the process of building an HTML page with Adobe Dreamweaver and utilizing the Live Preview feature to preview the page on a local server. However, I am facing some issues with my JavaScript code. I am attempting to populate a dropdown ...

javascripthtmlarraysdreamweaveronload

Adjusting the value of a variable in an Scss selector will result in a change, regardless of the presence of an element matching the selector

CSS File $dark-mode: false!default; $primary-dark: blue; [dark-mode='dark'] { background: gray!important; $dark-mode: true!global; } [dark-mode='light'] { background: yellow!important; $dark-mode: false!global; } @if $dark-m ...

htmlcsssass

Tips for connecting elements at the same index

.buttons, .weChangeColor { width: 50%; height: 100%; float: left; } .weChangeColor p { background: red; border: 1px solid; } .toggleColor { background: green; } <div class="buttons"> <p><a href="#">FirstLink</a></ ...

javascriptjqueryhtmlcss

Unable to access URL through AppGyver's rootview

As per the information provided in their guide: All location attributes can be either Supersonic routes or URLs. After adding the code to my structure.coffee file, only the initial splash screen appears and nothing else loads: rootView: location ...

angularjshtmlcoffeescriptsteroids