Mixing
Animation not rendering well in Microsoft Edge
0
I'm using a card for news block.
On hovering the card an overlay will appear from the bottom to top (sliding)
Everything goes well on Firefox and Chrome browser when viewing in IE the animation is rendering very bad also it didn't slide the animation
Can anyone guide me I'll attach my code here.
Any improvements, suggestions or alternate solutions were welcomed .
ps: I'm currently using Microsoft Edge 42.17134.1.0
.card_container{
position:relative;
width:280px;
margin:auto;
background:rgba(0,0,0,0.2);
height:450px; overflow:hidden;
}
.card_text{
position:absolute;
color:#fff;
height:100%;
width:100%;
top:0;
left:0;
}
.card_text .pre_state {
position:absolute;
top:calc(100% - 30%);
width:100%;
padding:30px 15px 25px;
height:100%;
transform:translate(0%, -30px);
}
.card_text h5{
font:14px/25px 'Graphik-Regular';
padding-bottom:10px;
}
.card_text h2{
font:20px/22px 'Graphik-Medium';
}
.card_text a.hidn{
position:absolute;
bottom:15%;
font:14px/22px 'Graphik-Medium';
color:#fff;
display:none;
}
.card_container:hover .card_text .pre_state{
top:0;
background-color:rgba(51,154,205,0.7);
transition:all .5s ease-out, all 0.5s ease-in;
transform:none;
}
.card_container:hover .card_text a.hidn{
display:block;
}<div class="card_container">
<div class="card_text">
<div class="pre_state">
<h5>20 Oktober 2018</h5>
<h2>Vestibulum facilisis, tortor atrutrum cursus.</h2>
<a href="#" class="hidn">Read more > </a>
</div>
</div>
</div>javascript html css microsoft-edge
edited Dec 26 '18 at 22:33
TylerH
15.7k105368
asked Nov 21 '18 at 9:04
PrincePrince
141113
|
show 1 more comment
0
I'm using a card for news block.
On hovering the card an overlay will appear from the bottom to top (sliding)
Everything goes well on Firefox and Chrome browser when viewing in IE the animation is rendering very bad also it didn't slide the animation
Can anyone guide me I'll attach my code here.
Any improvements, suggestions or alternate solutions were welcomed .
ps: I'm currently using Microsoft Edge 42.17134.1.0
.card_container{
position:relative;
width:280px;
margin:auto;
background:rgba(0,0,0,0.2);
height:450px; overflow:hidden;
}
.card_text{
position:absolute;
color:#fff;
height:100%;
width:100%;
top:0;
left:0;
}
.card_text .pre_state {
position:absolute;
top:calc(100% - 30%);
width:100%;
padding:30px 15px 25px;
height:100%;
transform:translate(0%, -30px);
}
.card_text h5{
font:14px/25px 'Graphik-Regular';
padding-bottom:10px;
}
.card_text h2{
font:20px/22px 'Graphik-Medium';
}
.card_text a.hidn{
position:absolute;
bottom:15%;
font:14px/22px 'Graphik-Medium';
color:#fff;
display:none;
}
.card_container:hover .card_text .pre_state{
top:0;
background-color:rgba(51,154,205,0.7);
transition:all .5s ease-out, all 0.5s ease-in;
transform:none;
}
.card_container:hover .card_text a.hidn{
display:block;
}<div class="card_container">
<div class="card_text">
<div class="pre_state">
<h5>20 Oktober 2018</h5>
<h2>Vestibulum facilisis, tortor atrutrum cursus.</h2>
<a href="#" class="hidn">Read more > </a>
</div>
</div>
</div>javascript html css microsoft-edge
edited Dec 26 '18 at 22:33
TylerH
15.7k105368
asked Nov 21 '18 at 9:04
PrincePrince
141113
Looks likecalcis only partially supported in IE 9 - caniuse.com/#search=calc
– Marc Hjorth
Nov 21 '18 at 9:06
@Mohammad that didn't solved my problem
– Prince
Nov 21 '18 at 9:10
IE 9 doesn't supporttransitionas you can see in caniuse.com/#feat=css-transitions
– Mohammad
Nov 21 '18 at 9:10
I don't know what version of IE its Microsoft Edge 42.17134.1.0
– Prince
Nov 21 '18 at 9:13
First you said I'm currently using IE 9
– Mohammad
Nov 21 '18 at 9:14
|
show 1 more comment
0
0
0
1
I'm using a card for news block.
On hovering the card an overlay will appear from the bottom to top (sliding)
Everything goes well on Firefox and Chrome browser when viewing in IE the animation is rendering very bad also it didn't slide the animation
Can anyone guide me I'll attach my code here.
Any improvements, suggestions or alternate solutions were welcomed .
ps: I'm currently using Microsoft Edge 42.17134.1.0
.card_container{
position:relative;
width:280px;
margin:auto;
background:rgba(0,0,0,0.2);
height:450px; overflow:hidden;
}
.card_text{
position:absolute;
color:#fff;
height:100%;
width:100%;
top:0;
left:0;
}
.card_text .pre_state {
position:absolute;
top:calc(100% - 30%);
width:100%;
padding:30px 15px 25px;
height:100%;
transform:translate(0%, -30px);
}
.card_text h5{
font:14px/25px 'Graphik-Regular';
padding-bottom:10px;
}
.card_text h2{
font:20px/22px 'Graphik-Medium';
}
.card_text a.hidn{
position:absolute;
bottom:15%;
font:14px/22px 'Graphik-Medium';
color:#fff;
display:none;
}
.card_container:hover .card_text .pre_state{
top:0;
background-color:rgba(51,154,205,0.7);
transition:all .5s ease-out, all 0.5s ease-in;
transform:none;
}
.card_container:hover .card_text a.hidn{
display:block;
}<div class="card_container">
<div class="card_text">
<div class="pre_state">
<h5>20 Oktober 2018</h5>
<h2>Vestibulum facilisis, tortor atrutrum cursus.</h2>
<a href="#" class="hidn">Read more > </a>
</div>
</div>
</div>javascript html css microsoft-edge
edited Dec 26 '18 at 22:33
TylerH
15.7k105368
asked Nov 21 '18 at 9:04
PrincePrince
141113
I'm using a card for news block.
On hovering the card an overlay will appear from the bottom to top (sliding)
Everything goes well on Firefox and Chrome browser when viewing in IE the animation is rendering very bad also it didn't slide the animation
Can anyone guide me I'll attach my code here.
Any improvements, suggestions or alternate solutions were welcomed .
ps: I'm currently using Microsoft Edge 42.17134.1.0
.card_container{
position:relative;
width:280px;
margin:auto;
background:rgba(0,0,0,0.2);
height:450px; overflow:hidden;
}
.card_text{
position:absolute;
color:#fff;
height:100%;
width:100%;
top:0;
left:0;
}
.card_text .pre_state {
position:absolute;
top:calc(100% - 30%);
width:100%;
padding:30px 15px 25px;
height:100%;
transform:translate(0%, -30px);
}
.card_text h5{
font:14px/25px 'Graphik-Regular';
padding-bottom:10px;
}
.card_text h2{
font:20px/22px 'Graphik-Medium';
}
.card_text a.hidn{
position:absolute;
bottom:15%;
font:14px/22px 'Graphik-Medium';
color:#fff;
display:none;
}
.card_container:hover .card_text .pre_state{
top:0;
background-color:rgba(51,154,205,0.7);
transition:all .5s ease-out, all 0.5s ease-in;
transform:none;
}
.card_container:hover .card_text a.hidn{
display:block;
}<div class="card_container">
<div class="card_text">
<div class="pre_state">
<h5>20 Oktober 2018</h5>
<h2>Vestibulum facilisis, tortor atrutrum cursus.</h2>
<a href="#" class="hidn">Read more > </a>
</div>
</div>
</div>.card_container{
position:relative;
width:280px;
margin:auto;
background:rgba(0,0,0,0.2);
height:450px; overflow:hidden;
}
.card_text{
position:absolute;
color:#fff;
height:100%;
width:100%;
top:0;
left:0;
}
.card_text .pre_state {
position:absolute;
top:calc(100% - 30%);
width:100%;
padding:30px 15px 25px;
height:100%;
transform:translate(0%, -30px);
}
.card_text h5{
font:14px/25px 'Graphik-Regular';
padding-bottom:10px;
}
.card_text h2{
font:20px/22px 'Graphik-Medium';
}
.card_text a.hidn{
position:absolute;
bottom:15%;
font:14px/22px 'Graphik-Medium';
color:#fff;
display:none;
}
.card_container:hover .card_text .pre_state{
top:0;
background-color:rgba(51,154,205,0.7);
transition:all .5s ease-out, all 0.5s ease-in;
transform:none;
}
.card_container:hover .card_text a.hidn{
display:block;
}<div class="card_container">
<div class="card_text">
<div class="pre_state">
<h5>20 Oktober 2018</h5>
<h2>Vestibulum facilisis, tortor atrutrum cursus.</h2>
<a href="#" class="hidn">Read more > </a>
</div>
</div>
</div>.card_container{
position:relative;
width:280px;
margin:auto;
background:rgba(0,0,0,0.2);
height:450px; overflow:hidden;
}
.card_text{
position:absolute;
color:#fff;
height:100%;
width:100%;
top:0;
left:0;
}
.card_text .pre_state {
position:absolute;
top:calc(100% - 30%);
width:100%;
padding:30px 15px 25px;
height:100%;
transform:translate(0%, -30px);
}
.card_text h5{
font:14px/25px 'Graphik-Regular';
padding-bottom:10px;
}
.card_text h2{
font:20px/22px 'Graphik-Medium';
}
.card_text a.hidn{
position:absolute;
bottom:15%;
font:14px/22px 'Graphik-Medium';
color:#fff;
display:none;
}
.card_container:hover .card_text .pre_state{
top:0;
background-color:rgba(51,154,205,0.7);
transition:all .5s ease-out, all 0.5s ease-in;
transform:none;
}
.card_container:hover .card_text a.hidn{
display:block;
}<div class="card_container">
<div class="card_text">
<div class="pre_state">
<h5>20 Oktober 2018</h5>
<h2>Vestibulum facilisis, tortor atrutrum cursus.</h2>
<a href="#" class="hidn">Read more > </a>
</div>
</div>
</div>javascript html css microsoft-edge
javascript html css microsoft-edge
edited Dec 26 '18 at 22:33
TylerH
15.7k105368
asked Nov 21 '18 at 9:04
PrincePrince
141113
edited Dec 26 '18 at 22:33
TylerH
15.7k105368
asked Nov 21 '18 at 9:04
PrincePrince
141113
edited Dec 26 '18 at 22:33
TylerH
15.7k105368
edited Dec 26 '18 at 22:33
TylerH
15.7k105368
edited Dec 26 '18 at 22:33
TylerH
15.7k105368
15.7k105368
asked Nov 21 '18 at 9:04
PrincePrince
141113
asked Nov 21 '18 at 9:04
PrincePrince
141113
asked Nov 21 '18 at 9:04
PrincePrince
141113
141113
Looks likecalcis only partially supported in IE 9 - caniuse.com/#search=calc
– Marc Hjorth
Nov 21 '18 at 9:06
@Mohammad that didn't solved my problem
– Prince
Nov 21 '18 at 9:10
IE 9 doesn't supporttransitionas you can see in caniuse.com/#feat=css-transitions
– Mohammad
Nov 21 '18 at 9:10
I don't know what version of IE its Microsoft Edge 42.17134.1.0
– Prince
Nov 21 '18 at 9:13
First you said I'm currently using IE 9
– Mohammad
Nov 21 '18 at 9:14
|
show 1 more comment
Looks likecalcis only partially supported in IE 9 - caniuse.com/#search=calc
– Marc Hjorth
Nov 21 '18 at 9:06
@Mohammad that didn't solved my problem
– Prince
Nov 21 '18 at 9:10
IE 9 doesn't supporttransitionas you can see in caniuse.com/#feat=css-transitions
– Mohammad
Nov 21 '18 at 9:10
I don't know what version of IE its Microsoft Edge 42.17134.1.0
– Prince
Nov 21 '18 at 9:13
First you said I'm currently using IE 9
– Mohammad
Nov 21 '18 at 9:14
Looks like
calc is only partially supported in IE 9 - caniuse.com/#search=calc– Marc Hjorth
Nov 21 '18 at 9:06
Looks like
calc is only partially supported in IE 9 - caniuse.com/#search=calc– Marc Hjorth
Nov 21 '18 at 9:06
@Mohammad that didn't solved my problem
– Prince
Nov 21 '18 at 9:10
@Mohammad that didn't solved my problem
– Prince
Nov 21 '18 at 9:10
IE 9 doesn't support
transition as you can see in caniuse.com/#feat=css-transitions– Mohammad
Nov 21 '18 at 9:10
IE 9 doesn't support
transition as you can see in caniuse.com/#feat=css-transitions– Mohammad
Nov 21 '18 at 9:10
I don't know what version of IE its Microsoft Edge 42.17134.1.0
– Prince
Nov 21 '18 at 9:13
I don't know what version of IE its Microsoft Edge 42.17134.1.0
– Prince
Nov 21 '18 at 9:13
First you said I'm currently using IE 9
– Mohammad
Nov 21 '18 at 9:14
First you said I'm currently using IE 9
– Mohammad
Nov 21 '18 at 9:14
|
show 1 more comment
1 Answer
1
active
oldest
votes
1
As you clearly stated that sliding animation not working in IE its just because IE just don't support/partially support the calc() propoerty
BTW.. Why are you giving top:calc(100% - 30%); you can directly mention it as top:70%;
Try this
.card_container{
position:relative;
width:280px;
margin:auto;
background:rgba(0,0,0,0.2);
height:450px; overflow:hidden;
}
.card_text{
position:absolute;
color:#fff;
height:100%;
width:100%;
top:0;
left:0;
}
.card_text .pre_state {
position:absolute;
/*top:calc(100% - 30%); */
top: 70%;
width:100%;
padding:30px 15px 25px;
height:100%;
transform:translate(0%, -30px);
}
.card_text h5{
font:14px/25px 'Graphik-Regular';
padding-bottom:10px;
}
.card_text h2{
font:20px/22px 'Graphik-Medium';
}
.card_text a.hidn{
position:absolute;
bottom:15%;
font:14px/22px 'Graphik-Medium';
color:#fff;
display:none;
}
.card_container:hover .card_text .pre_state{
top:0;
background-color:rgba(51,154,205,0.7);
transition:all .5s ease-out, all 0.5s ease-in;
transform:none;
}
.card_container:hover .card_text a.hidn{
display:block;
}<div class="card_container">
<div class="card_text">
<div class="pre_state">
<h5>20 Oktober 2018</h5>
<h2>Vestibulum facilisis, tortor atrutrum cursus.</h2>
<a href="#" class="hidn">Read more > </a>
</div>
</div>
</div>
References:
https://css-tricks.com/forums/topic/calc-not-always-working-in-ie/
Browser support: https://caniuse.com/#feat=calc
answered Nov 21 '18 at 9:08
ViiraViira
2,373526
1
Thank you I was scratching head to fix this sliding problem also thanks for the references
– Prince
Nov 21 '18 at 9:24
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
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%2f53408492%2fanimation-not-rendering-well-in-microsoft-edge%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
As you clearly stated that sliding animation not working in IE its just because IE just don't support/partially support the calc() propoerty
BTW.. Why are you giving top:calc(100% - 30%); you can directly mention it as top:70%;
Try this
.card_container{
position:relative;
width:280px;
margin:auto;
background:rgba(0,0,0,0.2);
height:450px; overflow:hidden;
}
.card_text{
position:absolute;
color:#fff;
height:100%;
width:100%;
top:0;
left:0;
}
.card_text .pre_state {
position:absolute;
/*top:calc(100% - 30%); */
top: 70%;
width:100%;
padding:30px 15px 25px;
height:100%;
transform:translate(0%, -30px);
}
.card_text h5{
font:14px/25px 'Graphik-Regular';
padding-bottom:10px;
}
.card_text h2{
font:20px/22px 'Graphik-Medium';
}
.card_text a.hidn{
position:absolute;
bottom:15%;
font:14px/22px 'Graphik-Medium';
color:#fff;
display:none;
}
.card_container:hover .card_text .pre_state{
top:0;
background-color:rgba(51,154,205,0.7);
transition:all .5s ease-out, all 0.5s ease-in;
transform:none;
}
.card_container:hover .card_text a.hidn{
display:block;
}<div class="card_container">
<div class="card_text">
<div class="pre_state">
<h5>20 Oktober 2018</h5>
<h2>Vestibulum facilisis, tortor atrutrum cursus.</h2>
<a href="#" class="hidn">Read more > </a>
</div>
</div>
</div>
References:
https://css-tricks.com/forums/topic/calc-not-always-working-in-ie/
Browser support: https://caniuse.com/#feat=calc
answered Nov 21 '18 at 9:08
ViiraViira
2,373526
1
Thank you I was scratching head to fix this sliding problem also thanks for the references
– Prince
Nov 21 '18 at 9:24
add a comment |
1
As you clearly stated that sliding animation not working in IE its just because IE just don't support/partially support the calc() propoerty
BTW.. Why are you giving top:calc(100% - 30%); you can directly mention it as top:70%;
Try this
.card_container{
position:relative;
width:280px;
margin:auto;
background:rgba(0,0,0,0.2);
height:450px; overflow:hidden;
}
.card_text{
position:absolute;
color:#fff;
height:100%;
width:100%;
top:0;
left:0;
}
.card_text .pre_state {
position:absolute;
/*top:calc(100% - 30%); */
top: 70%;
width:100%;
padding:30px 15px 25px;
height:100%;
transform:translate(0%, -30px);
}
.card_text h5{
font:14px/25px 'Graphik-Regular';
padding-bottom:10px;
}
.card_text h2{
font:20px/22px 'Graphik-Medium';
}
.card_text a.hidn{
position:absolute;
bottom:15%;
font:14px/22px 'Graphik-Medium';
color:#fff;
display:none;
}
.card_container:hover .card_text .pre_state{
top:0;
background-color:rgba(51,154,205,0.7);
transition:all .5s ease-out, all 0.5s ease-in;
transform:none;
}
.card_container:hover .card_text a.hidn{
display:block;
}<div class="card_container">
<div class="card_text">
<div class="pre_state">
<h5>20 Oktober 2018</h5>
<h2>Vestibulum facilisis, tortor atrutrum cursus.</h2>
<a href="#" class="hidn">Read more > </a>
</div>
</div>
</div>
References:
https://css-tricks.com/forums/topic/calc-not-always-working-in-ie/
Browser support: https://caniuse.com/#feat=calc
answered Nov 21 '18 at 9:08
ViiraViira
2,373526
1
Thank you I was scratching head to fix this sliding problem also thanks for the references
– Prince
Nov 21 '18 at 9:24
add a comment |
1
1
1
As you clearly stated that sliding animation not working in IE its just because IE just don't support/partially support the calc() propoerty
BTW.. Why are you giving top:calc(100% - 30%); you can directly mention it as top:70%;
Try this
.card_container{
position:relative;
width:280px;
margin:auto;
background:rgba(0,0,0,0.2);
height:450px; overflow:hidden;
}
.card_text{
position:absolute;
color:#fff;
height:100%;
width:100%;
top:0;
left:0;
}
.card_text .pre_state {
position:absolute;
/*top:calc(100% - 30%); */
top: 70%;
width:100%;
padding:30px 15px 25px;
height:100%;
transform:translate(0%, -30px);
}
.card_text h5{
font:14px/25px 'Graphik-Regular';
padding-bottom:10px;
}
.card_text h2{
font:20px/22px 'Graphik-Medium';
}
.card_text a.hidn{
position:absolute;
bottom:15%;
font:14px/22px 'Graphik-Medium';
color:#fff;
display:none;
}
.card_container:hover .card_text .pre_state{
top:0;
background-color:rgba(51,154,205,0.7);
transition:all .5s ease-out, all 0.5s ease-in;
transform:none;
}
.card_container:hover .card_text a.hidn{
display:block;
}<div class="card_container">
<div class="card_text">
<div class="pre_state">
<h5>20 Oktober 2018</h5>
<h2>Vestibulum facilisis, tortor atrutrum cursus.</h2>
<a href="#" class="hidn">Read more > </a>
</div>
</div>
</div>
References:
https://css-tricks.com/forums/topic/calc-not-always-working-in-ie/
Browser support: https://caniuse.com/#feat=calc
answered Nov 21 '18 at 9:08
ViiraViira
2,373526
As you clearly stated that sliding animation not working in IE its just because IE just don't support/partially support the calc() propoerty
BTW.. Why are you giving top:calc(100% - 30%); you can directly mention it as top:70%;
Try this
.card_container{
position:relative;
width:280px;
margin:auto;
background:rgba(0,0,0,0.2);
height:450px; overflow:hidden;
}
.card_text{
position:absolute;
color:#fff;
height:100%;
width:100%;
top:0;
left:0;
}
.card_text .pre_state {
position:absolute;
/*top:calc(100% - 30%); */
top: 70%;
width:100%;
padding:30px 15px 25px;
height:100%;
transform:translate(0%, -30px);
}
.card_text h5{
font:14px/25px 'Graphik-Regular';
padding-bottom:10px;
}
.card_text h2{
font:20px/22px 'Graphik-Medium';
}
.card_text a.hidn{
position:absolute;
bottom:15%;
font:14px/22px 'Graphik-Medium';
color:#fff;
display:none;
}
.card_container:hover .card_text .pre_state{
top:0;
background-color:rgba(51,154,205,0.7);
transition:all .5s ease-out, all 0.5s ease-in;
transform:none;
}
.card_container:hover .card_text a.hidn{
display:block;
}<div class="card_container">
<div class="card_text">
<div class="pre_state">
<h5>20 Oktober 2018</h5>
<h2>Vestibulum facilisis, tortor atrutrum cursus.</h2>
<a href="#" class="hidn">Read more > </a>
</div>
</div>
</div>
References:
https://css-tricks.com/forums/topic/calc-not-always-working-in-ie/
Browser support: https://caniuse.com/#feat=calc
.card_container{
position:relative;
width:280px;
margin:auto;
background:rgba(0,0,0,0.2);
height:450px; overflow:hidden;
}
.card_text{
position:absolute;
color:#fff;
height:100%;
width:100%;
top:0;
left:0;
}
.card_text .pre_state {
position:absolute;
/*top:calc(100% - 30%); */
top: 70%;
width:100%;
padding:30px 15px 25px;
height:100%;
transform:translate(0%, -30px);
}
.card_text h5{
font:14px/25px 'Graphik-Regular';
padding-bottom:10px;
}
.card_text h2{
font:20px/22px 'Graphik-Medium';
}
.card_text a.hidn{
position:absolute;
bottom:15%;
font:14px/22px 'Graphik-Medium';
color:#fff;
display:none;
}
.card_container:hover .card_text .pre_state{
top:0;
background-color:rgba(51,154,205,0.7);
transition:all .5s ease-out, all 0.5s ease-in;
transform:none;
}
.card_container:hover .card_text a.hidn{
display:block;
}<div class="card_container">
<div class="card_text">
<div class="pre_state">
<h5>20 Oktober 2018</h5>
<h2>Vestibulum facilisis, tortor atrutrum cursus.</h2>
<a href="#" class="hidn">Read more > </a>
</div>
</div>
</div>.card_container{
position:relative;
width:280px;
margin:auto;
background:rgba(0,0,0,0.2);
height:450px; overflow:hidden;
}
.card_text{
position:absolute;
color:#fff;
height:100%;
width:100%;
top:0;
left:0;
}
.card_text .pre_state {
position:absolute;
/*top:calc(100% - 30%); */
top: 70%;
width:100%;
padding:30px 15px 25px;
height:100%;
transform:translate(0%, -30px);
}
.card_text h5{
font:14px/25px 'Graphik-Regular';
padding-bottom:10px;
}
.card_text h2{
font:20px/22px 'Graphik-Medium';
}
.card_text a.hidn{
position:absolute;
bottom:15%;
font:14px/22px 'Graphik-Medium';
color:#fff;
display:none;
}
.card_container:hover .card_text .pre_state{
top:0;
background-color:rgba(51,154,205,0.7);
transition:all .5s ease-out, all 0.5s ease-in;
transform:none;
}
.card_container:hover .card_text a.hidn{
display:block;
}<div class="card_container">
<div class="card_text">
<div class="pre_state">
<h5>20 Oktober 2018</h5>
<h2>Vestibulum facilisis, tortor atrutrum cursus.</h2>
<a href="#" class="hidn">Read more > </a>
</div>
</div>
</div>answered Nov 21 '18 at 9:08
ViiraViira
2,373526
answered Nov 21 '18 at 9:08
ViiraViira
2,373526
answered Nov 21 '18 at 9:08
ViiraViira
2,373526
answered Nov 21 '18 at 9:08
ViiraViira
2,373526
2,373526
1
Thank you I was scratching head to fix this sliding problem also thanks for the references
– Prince
Nov 21 '18 at 9:24
add a comment |
1
Thank you I was scratching head to fix this sliding problem also thanks for the references
– Prince
Nov 21 '18 at 9:24
1
1
Thank you I was scratching head to fix this sliding problem also thanks for the references
– Prince
Nov 21 '18 at 9:24
Thank you I was scratching head to fix this sliding problem also thanks for the references
– Prince
Nov 21 '18 at 9:24
add a comment |
draft saved
draft discarded
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.
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%2f53408492%2fanimation-not-rendering-well-in-microsoft-edge%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
Looks like
calcis only partially supported in IE 9 - caniuse.com/#search=calc– Marc Hjorth
Nov 21 '18 at 9:06
@Mohammad that didn't solved my problem
– Prince
Nov 21 '18 at 9:10
IE 9 doesn't support
transitionas you can see in caniuse.com/#feat=css-transitions– Mohammad
Nov 21 '18 at 9:10
I don't know what version of IE its Microsoft Edge 42.17134.1.0
– Prince
Nov 21 '18 at 9:13
First you said I'm currently using IE 9
– Mohammad
Nov 21 '18 at 9:14