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
20.8k51434
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
7161113
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
20.8k51434
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
20.8k51434
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
20.8k51434
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
20.8k51434
answered Nov 11 at 2:26
Gustavo Morillo Marin
1
edited Nov 11 at 2:56
Nick
20.8k51434
edited Nov 11 at 2:56
Nick
20.8k51434
edited Nov 11 at 2:56
Nick
20.8k51434
20.8k51434
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
7161113
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
7161113
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
7161113
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
7161113
edited Nov 11 at 4:25
answered Nov 11 at 1:33
MartinBA
7161113
answered Nov 11 at 1:33
MartinBA
7161113
answered Nov 11 at 1:33
MartinBA
7161113
7161113
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 |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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
