Transition Duration Delay after Rolling Over Divs - html

Question

I can't get the rollover image (e.g. .rolled-thumb-1) to stay displayed after rolling off the image thumbs. It should work using the transition delay property exactly like in this demo, but doesn't. Rolling over the thumbs creates an absolutely positioned div rather than replace the initial large image's background image.
The selector that should do it is:
.rolled {
transition: background-image .1s 604800s;
background-size: cover;
/* background-image: url('https://cml.sad.ukrd.com/tp/3x2/'); - transparent img */
}
And hovering over, for example, 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 noticed many other similar posts mention reordering the transition and transition-delay rules, which I've done but to no avail. If I uncomment the transparent as above, only 1 of the images work, but then doesn't change back and only 1 works. I think it's something to do with having nothing to transition in the first place, as it somewhat transitioned when the BG image was there, though not properly.
Does anyone have any ideas? An explanation of what I'm doing wrong would be very helpful. Thanks for any help
/* 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') }
/* 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;
}
#hook-container > span {
font-weight: bold;
font-size: 1.5em;
}
#hook-container > ul {
list-style-type: none;
font-size: 1em;
}
#hook-container ul li:before {
content: '✓ ';
color: green;
}
#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;
}
.rolled-thumb-2 {left:-104%}
.rolled-thumb-3 {left:-208%}
.rolled-thumb-4 {left:-312%}
.rolled-thumb-1, .rolled-thumb-2, .rolled-thumb-3, .rolled-thumb-4 { background-color: transparent }
.rolled {
transition: background-image .1s 604800s;
background-size: cover;
/* background-image: url('https://cml.sad.ukrd.com/tp/3x2/'); */
}
#thumb-1:hover .rolled-thumb-1 {
background-image: url('https://cml.sad.ukrd.com/image/394545.jpg');
transition: background-image 0s;
transition-delay: 0s;
}
#thumb-2:hover .rolled-thumb-2 {
background-image: url('https://cml.sad.ukrd.com/image/572806.jpg');
transition: background-image 0s;
transition-delay: 0s;
}
#thumb-3:hover .rolled-thumb-3 {
background-image: url('https://cml.sad.ukrd.com/image/486757.jpg');
transition: background-image 0s;
transition-delay: 0s;
}
#thumb-4:hover .rolled-thumb-4 {
background-image: url('https://cml.sad.ukrd.com/image/612357.jpg');
transition: background-image 0s;
transition-delay: 0s;
}
#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>
UPDATE
This is similar to one of my other posts, but different as the solution to the other post does not apply to this post. Not trying to spam and genuinely don't know how to solve this.

Answer 1

/* 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') }
/* 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;
}
#hook-container > span {
font-weight: bold;
font-size: 1.5em;
}
#hook-container > ul {
list-style-type: none;
font-size: 1em;
}
#hook-container ul li:before {
content: '✓ ';
color: green;
}
#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>