I’m looking for a simple as possible solution as my CSS brain / Javascript is embryonic
If anyone has an idea what could easily be added to the code without a major overhaul i would be eternally grateful but it has to be cross browser compatible :
Thanks in advance,
David
Stone me mate, you have an absolutely amazing memory.
I had to search through my old posts and eventually found
the post to which you referred - 15th October, 2015.
Even then I had to run the code before I had a certain amount
of memory recall.
This is that code…
[code]
untitled document
#holder {
position:relative;
width:15%;
padding-bottom:10%;
box-sizing:border-box;
margin:0 auto;
}
#holder input{
display:none;
}
#holder label {
position:absolute;
width:100%;
padding:2px;
border:1px solid #999;
box-sizing:border-box;
background-color:#fff;
box-shadow:0 0 0 #999;
cursor:pointer;
transition:all 2s ease-in-out;
}
#holder label::after {
content:'description';
display:block;
padding:0;
font-size:0;
color:#fff;
text-align:center;
background-color:#fff;
transition:all 2s ease-in-out;
}
#holder label img {
display:block;
width:100%;
border:1px solid #000;
box-sizing:border-box;
}
#cb:checked~label {
width:450%;
/*************************************************
The margin-left value is the final label width
minus the intial label width divided by two.
In this case (450-100)/2 = 175
**************************************************/
margin-left:-175%;
padding:6px;
border:3px solid #999;
box-shadow:6px 6px 6px #999;
}
#cb:checked~label::after {
padding:5px 0;
font-size:100%;
background-color:#333;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero
bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh,
posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat.
Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta,
sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet
nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo
odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex.
Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur
purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem.
