Image hover scaling not working inside a table (blocked by thead/tfoot)
up vote
1
down vote
favorite
Relevant jsfiddle: http://jsfiddle.net/theanine/0d8vbrnt/13/
img.owl {
width: 100px;
}
img.owl:hover {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
transition: all 1s;
-webkit-transition: all 1s;
}
table {
margin-left:auto;
margin-right:auto;
}
table thead{
display:block;
height:48px;
overflow:auto;
}
table tbody{
display:block;
height:calc(99.5vh - 87px);
height:calc((var(--vh, 1vh) * 100) - 91px);
overflow-y: scroll;
}
Using z-index didn't seem to help. However removing "overflow-y: scroll" did work. The problem is I need to keep this because the goal is to have header/footer rows (and the page itself) that remain static as the tbody is scrolled, and images that scale when moused over (and don't get blocked by the header/footer rows).
html css
asked Nov 11 at 0:54
theanine
4611720
add a comment |
up vote
1
down vote
favorite
Relevant jsfiddle: http://jsfiddle.net/theanine/0d8vbrnt/13/
img.owl {
width: 100px;
}
img.owl:hover {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
transition: all 1s;
-webkit-transition: all 1s;
}
table {
margin-left:auto;
margin-right:auto;
}
table thead{
display:block;
height:48px;
overflow:auto;
}
table tbody{
display:block;
height:calc(99.5vh - 87px);
height:calc((var(--vh, 1vh) * 100) - 91px);
overflow-y: scroll;
}
Using z-index didn't seem to help. However removing "overflow-y: scroll" did work. The problem is I need to keep this because the goal is to have header/footer rows (and the page itself) that remain static as the tbody is scrolled, and images that scale when moused over (and don't get blocked by the header/footer rows).
html css
asked Nov 11 at 0:54
theanine
4611720
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
Relevant jsfiddle: http://jsfiddle.net/theanine/0d8vbrnt/13/
img.owl {
width: 100px;
}
img.owl:hover {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
transition: all 1s;
-webkit-transition: all 1s;
}
table {
margin-left:auto;
margin-right:auto;
}
table thead{
display:block;
height:48px;
overflow:auto;
}
table tbody{
display:block;
height:calc(99.5vh - 87px);
height:calc((var(--vh, 1vh) * 100) - 91px);
overflow-y: scroll;
}
Using z-index didn't seem to help. However removing "overflow-y: scroll" did work. The problem is I need to keep this because the goal is to have header/footer rows (and the page itself) that remain static as the tbody is scrolled, and images that scale when moused over (and don't get blocked by the header/footer rows).
html css
asked Nov 11 at 0:54
theanine
4611720
Relevant jsfiddle: http://jsfiddle.net/theanine/0d8vbrnt/13/
img.owl {
width: 100px;
}
img.owl:hover {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
transition: all 1s;
-webkit-transition: all 1s;
}
table {
margin-left:auto;
margin-right:auto;
}
table thead{
display:block;
height:48px;
overflow:auto;
}
table tbody{
display:block;
height:calc(99.5vh - 87px);
height:calc((var(--vh, 1vh) * 100) - 91px);
overflow-y: scroll;
}
Using z-index didn't seem to help. However removing "overflow-y: scroll" did work. The problem is I need to keep this because the goal is to have header/footer rows (and the page itself) that remain static as the tbody is scrolled, and images that scale when moused over (and don't get blocked by the header/footer rows).
html css
html css
asked Nov 11 at 0:54
theanine
4611720
asked Nov 11 at 0:54
theanine
4611720
asked Nov 11 at 0:54
theanine
4611720
asked Nov 11 at 0:54
theanine
4611720
asked Nov 11 at 0:54
theanine
4611720
4611720
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
up vote
0
down vote
You can use position fixed
table thead {
display:block;
height:48px;
overflow:hidden;
position: fixed;
top: 0;
width: 100%;
background-color: white
}
table tbody{
display:block;
height:calc(99.5vh - 87px);
height:calc((var(--vh, 1vh) * 100) - 91px);
}
edited Nov 11 at 2:56
Nick
19.2k51433
answered Nov 11 at 2:26
Gustavo Morillo Marin
1
Please use code formatting for code blocks, it makes them easier to read. See stackoverflow.com/help/formatting
– Nick
Nov 11 at 2:57
@Gustavo this doesn't work -- the thead element will clobber over the tbody, so the first row(s) will be partially/fully obscurred.
– theanine
Nov 11 at 3:25
add a comment |
up vote
0
down vote
I think what you are looking for is
img.owl {
width: 100px;
}
img.owl:hover {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
transition: all 1s;
-webkit-transition: all 1s;
}
table {
margin-left:auto;
margin-right:auto;
}
table thead{
margin: 0 auto;
width: 300px;
display:block;
height:28px;
overflow:auto;
}
table tbody{
display:block;
height:calc(99.5vh - 87px);
height:calc((var(--vh, 1vh) * 100) - 91px);
overflow-y: scroll;
padding: 35px 0;
}
tr{
display: flex;
justify-content: center;
}
tbody::-webkit-scrollbar {
display: none;
}
I just made a few changes in your code, and with the help of a little bit of flexbox I think I got it! let me know if that help you
answered Nov 11 at 1:33
MartinBA
706113
thanks for your effort, but this doesn't work. The images go under thead in your code sample, and tfoot isn't static.
– theanine
Nov 13 at 11:01
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
You can use position fixed
table thead {
display:block;
height:48px;
overflow:hidden;
position: fixed;
top: 0;
width: 100%;
background-color: white
}
table tbody{
display:block;
height:calc(99.5vh - 87px);
height:calc((var(--vh, 1vh) * 100) - 91px);
}
edited Nov 11 at 2:56
Nick
19.2k51433
answered Nov 11 at 2:26
Gustavo Morillo Marin
1
Please use code formatting for code blocks, it makes them easier to read. See stackoverflow.com/help/formatting
– Nick
Nov 11 at 2:57
@Gustavo this doesn't work -- the thead element will clobber over the tbody, so the first row(s) will be partially/fully obscurred.
– theanine
Nov 11 at 3:25
add a comment |
up vote
0
down vote
You can use position fixed
table thead {
display:block;
height:48px;
overflow:hidden;
position: fixed;
top: 0;
width: 100%;
background-color: white
}
table tbody{
display:block;
height:calc(99.5vh - 87px);
height:calc((var(--vh, 1vh) * 100) - 91px);
}
edited Nov 11 at 2:56
Nick
19.2k51433
answered Nov 11 at 2:26
Gustavo Morillo Marin
1
Please use code formatting for code blocks, it makes them easier to read. See stackoverflow.com/help/formatting
– Nick
Nov 11 at 2:57
@Gustavo this doesn't work -- the thead element will clobber over the tbody, so the first row(s) will be partially/fully obscurred.
– theanine
Nov 11 at 3:25
add a comment |
up vote
0
down vote
up vote
0
down vote
You can use position fixed
table thead {
display:block;
height:48px;
overflow:hidden;
position: fixed;
top: 0;
width: 100%;
background-color: white
}
table tbody{
display:block;
height:calc(99.5vh - 87px);
height:calc((var(--vh, 1vh) * 100) - 91px);
}
edited Nov 11 at 2:56
Nick
19.2k51433
answered Nov 11 at 2:26
Gustavo Morillo Marin
1
You can use position fixed
table thead {
display:block;
height:48px;
overflow:hidden;
position: fixed;
top: 0;
width: 100%;
background-color: white
}
table tbody{
display:block;
height:calc(99.5vh - 87px);
height:calc((var(--vh, 1vh) * 100) - 91px);
}
edited Nov 11 at 2:56
Nick
19.2k51433
answered Nov 11 at 2:26
Gustavo Morillo Marin
1
edited Nov 11 at 2:56
Nick
19.2k51433
edited Nov 11 at 2:56
Nick
19.2k51433
edited Nov 11 at 2:56
Nick
19.2k51433
19.2k51433
answered Nov 11 at 2:26
Gustavo Morillo Marin
1
answered Nov 11 at 2:26
Gustavo Morillo Marin
1
answered Nov 11 at 2:26
Gustavo Morillo Marin
1
1
Please use code formatting for code blocks, it makes them easier to read. See stackoverflow.com/help/formatting
– Nick
Nov 11 at 2:57
@Gustavo this doesn't work -- the thead element will clobber over the tbody, so the first row(s) will be partially/fully obscurred.
– theanine
Nov 11 at 3:25
add a comment |
Please use code formatting for code blocks, it makes them easier to read. See stackoverflow.com/help/formatting
– Nick
Nov 11 at 2:57
@Gustavo this doesn't work -- the thead element will clobber over the tbody, so the first row(s) will be partially/fully obscurred.
– theanine
Nov 11 at 3:25
Please use code formatting for code blocks, it makes them easier to read. See stackoverflow.com/help/formatting
– Nick
Nov 11 at 2:57
Please use code formatting for code blocks, it makes them easier to read. See stackoverflow.com/help/formatting
– Nick
Nov 11 at 2:57
@Gustavo this doesn't work -- the thead element will clobber over the tbody, so the first row(s) will be partially/fully obscurred.
– theanine
Nov 11 at 3:25
@Gustavo this doesn't work -- the thead element will clobber over the tbody, so the first row(s) will be partially/fully obscurred.
– theanine
Nov 11 at 3:25
add a comment |
up vote
0
down vote
I think what you are looking for is
img.owl {
width: 100px;
}
img.owl:hover {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
transition: all 1s;
-webkit-transition: all 1s;
}
table {
margin-left:auto;
margin-right:auto;
}
table thead{
margin: 0 auto;
width: 300px;
display:block;
height:28px;
overflow:auto;
}
table tbody{
display:block;
height:calc(99.5vh - 87px);
height:calc((var(--vh, 1vh) * 100) - 91px);
overflow-y: scroll;
padding: 35px 0;
}
tr{
display: flex;
justify-content: center;
}
tbody::-webkit-scrollbar {
display: none;
}
I just made a few changes in your code, and with the help of a little bit of flexbox I think I got it! let me know if that help you
answered Nov 11 at 1:33
MartinBA
706113
thanks for your effort, but this doesn't work. The images go under thead in your code sample, and tfoot isn't static.
– theanine
Nov 13 at 11:01
add a comment |
up vote
0
down vote
I think what you are looking for is
img.owl {
width: 100px;
}
img.owl:hover {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
transition: all 1s;
-webkit-transition: all 1s;
}
table {
margin-left:auto;
margin-right:auto;
}
table thead{
margin: 0 auto;
width: 300px;
display:block;
height:28px;
overflow:auto;
}
table tbody{
display:block;
height:calc(99.5vh - 87px);
height:calc((var(--vh, 1vh) * 100) - 91px);
overflow-y: scroll;
padding: 35px 0;
}
tr{
display: flex;
justify-content: center;
}
tbody::-webkit-scrollbar {
display: none;
}
I just made a few changes in your code, and with the help of a little bit of flexbox I think I got it! let me know if that help you
answered Nov 11 at 1:33
MartinBA
706113
thanks for your effort, but this doesn't work. The images go under thead in your code sample, and tfoot isn't static.
– theanine
Nov 13 at 11:01
add a comment |
up vote
0
down vote
up vote
0
down vote
I think what you are looking for is
img.owl {
width: 100px;
}
img.owl:hover {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
transition: all 1s;
-webkit-transition: all 1s;
}
table {
margin-left:auto;
margin-right:auto;
}
table thead{
margin: 0 auto;
width: 300px;
display:block;
height:28px;
overflow:auto;
}
table tbody{
display:block;
height:calc(99.5vh - 87px);
height:calc((var(--vh, 1vh) * 100) - 91px);
overflow-y: scroll;
padding: 35px 0;
}
tr{
display: flex;
justify-content: center;
}
tbody::-webkit-scrollbar {
display: none;
}
I just made a few changes in your code, and with the help of a little bit of flexbox I think I got it! let me know if that help you
answered Nov 11 at 1:33
MartinBA
706113
I think what you are looking for is
img.owl {
width: 100px;
}
img.owl:hover {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
transition: all 1s;
-webkit-transition: all 1s;
}
table {
margin-left:auto;
margin-right:auto;
}
table thead{
margin: 0 auto;
width: 300px;
display:block;
height:28px;
overflow:auto;
}
table tbody{
display:block;
height:calc(99.5vh - 87px);
height:calc((var(--vh, 1vh) * 100) - 91px);
overflow-y: scroll;
padding: 35px 0;
}
tr{
display: flex;
justify-content: center;
}
tbody::-webkit-scrollbar {
display: none;
}
I just made a few changes in your code, and with the help of a little bit of flexbox I think I got it! let me know if that help you
answered Nov 11 at 1:33
MartinBA
706113
edited Nov 11 at 4:25
answered Nov 11 at 1:33
MartinBA
706113
answered Nov 11 at 1:33
MartinBA
706113
answered Nov 11 at 1:33
MartinBA
706113
706113
thanks for your effort, but this doesn't work. The images go under thead in your code sample, and tfoot isn't static.
– theanine
Nov 13 at 11:01
add a comment |
thanks for your effort, but this doesn't work. The images go under thead in your code sample, and tfoot isn't static.
– theanine
Nov 13 at 11:01
thanks for your effort, but this doesn't work. The images go under thead in your code sample, and tfoot isn't static.
– theanine
Nov 13 at 11:01
thanks for your effort, but this doesn't work. The images go under thead in your code sample, and tfoot isn't static.
– theanine
Nov 13 at 11:01
add a comment |
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53244887%2fimage-hover-scaling-not-working-inside-a-table-blocked-by-thead-tfoot%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
