The CSS3 transition effect on this page works perfectly well on every other browser except IE. It also adds a border to the top and to the left of the thumbnails. I have tried making the borders of all the elements 0 but it still didn't help. The css is as shown below.
.slide-up-boxes .showbox a {
display: block;
margin: 0 0 20px;
height: 157px;
overflow: hidden;
width: 315px;
float: left;
border:none;
padding: 0px;
background: transparent;
}
.slide-up-boxes .showbox img {
color: #333;
text-align: center;
margin-right: 15px;
width: 315px;
float: left;
height: 157px;
font: italic 18px/65px Georgia, Serif; /* Vertically center text by making line height equal to height */
zoom: 1;
filter: alpha(opacity=45);
opacity: 0.5;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
}
.showbox a:hover img {
margin-top: -155px;
opacity: 0;
height: 157px;
width: 315px;
}
.showbox object {
color: white;
background: #393838;
font: 12px/15px Georgia, Serif;
opacity: 0;
-webkit-transform: rotate(6deg);
-webkit-transition: all 0.4s linear;
-moz-transform: rotate(6deg);
-moz-transition: all 0.4s linear;
-o-transform: rotate(6deg);
-o-transition: all 0.4s linear;
width: 314px;
float: left;
height: 154px;
border: none;
padding: 0px;
margin: 0px 15px 0px 0px;
}
.slide-up-boxes .showbox a:hover object {
opacity: 1;
width: 314px;
border: none;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
zoom: 1;
}
.slide-up-boxes .showbox#show1 object {
background: url(images/huethumb.jpg) ;
padding-top: 110px; zoom: 1;
border: none;
}
.slide-up-boxes .showbox#show2 object {
background: url(images/pizzathumb.jpg) ;
padding-top: 110px; zoom: 1;
border: none;
}
.slide-up-boxes .showbox#show3 object {
background: url(images/rickolthumb.jpg) ;
padding-top: 110px;
border: none;
}
.slide-up-boxes .showbox#show4 object {
background:url(images/bernie-thumber.jpg) ;
padding-top: 110px; zoom: 1;
background-repeat: no-repeat;
border: none;
}
.slide-up-boxes .showbox#show5 object {
background: url(images/nollythumb.png) ;
padding-top: 110px; zoom: 1;
border: none;
}
.slide-up-boxes .showbox#show6 object {
background:url(images/photothumg.jpg) ;
padding-top: 110px; zoom: 1;
border: none;
}
.slide-up-boxes .showbox#show7 object {
background:url(images/tradersthumb.png) ;
padding-top: 110px; zoom: 1;
border: none;
}
.slide-up-boxes .showbox#show8 object {
background:url(images/wpbathumb.jpg);
padding-top: 110px; zoom: 1;
border: none;
}
.slide-up-boxes .showbox#show9 object {
background:url(images/peterthumb.png);
padding-top: 110px;
zoom: 1;
border: none;
}
Anything you do with -webkit or -moz will not work with IE, they're browser engine specific css styles. ms-transform should work in IE9, but there is no transition style. See this MSDN article on CSS Compatibility and Internet Explorer for more details.
Related
Hi I was wondering if I could get any advice on how to do a animation such as this in react native: https://codepen.io/gayane-gasparyan/pen/jOmaBQK
It uses a mixture of keyframes, linear gradients but is a CSS based animation.
I have react-native-reanimated and native-base and can also leverage these modules if necessary.
Main CSS code:
.card {
background: #191c29;
width: var(--card-width);
height: var(--card-height);
padding: 3px;
position: relative;
border-radius: 6px;
justify-content: center;
align-items: center;
text-align: center;
display: flex;
font-size: 1.5em;
color: rgb(88 199 250 / 0%);
cursor: pointer;
font-family: cursive;
}
.card:hover {
color: rgb(88 199 250 / 100%);
transition: color 1s;
}
.card:hover:before, .card:hover:after {
animation: none;
opacity: 0;
}
.card::before {
content: "";
width: 104%;
height: 102%;
border-radius: 8px;
background-image: linear-gradient(
var(--rotate)
, #5ddcff, #3c67e3 43%, #4e00c2);
position: absolute;
z-index: -1;
top: -1%;
left: -2%;
animation: spin 2.5s linear infinite;
}
.card::after {
position: absolute;
content: "";
top: calc(var(--card-height) / 6);
left: 0;
right: 0;
z-index: -1;
height: 100%;
width: 100%;
margin: 0 auto;
transform: scale(0.8);
filter: blur(calc(var(--card-height) / 6));
background-image: linear-gradient(
var(--rotate)
, #5ddcff, #3c67e3 43%, #4e00c2);
opacity: 1;
transition: opacity .5s;
animation: spin 2.5s linear infinite;
}
#keyframes spin {
0% {
--rotate: 0deg;
}
100% {
--rotate: 360deg;
}
}
a {
color: #212534;
text-decoration: none;
font-family: sans-serif;
font-weight: bold;
margin-top: 2rem;
}
Can you please assist I need to set footer in the below image behind my scrollbar to show all the contents in the scrollbar.
Image:: enter image description here
I edited below css to remove the z-index and the footer is now behind the scrollbar records but now am facing an issue with the menu button all the menu pages are inactive as per the image below.
Image 2: enter image description here
CSS code::
.page-footer {
position: fixed;
z-index: 10; // I removed this
bottom: 0;
height: $footer-height;
min-width: 100vw;
.page-footer__background {
clip-path: polygon(0 64%, 100% 0, 100% 100%, 0% 100%);
background-image: url('../resources/images/picture-2.jpg');
background-size: cover;
background-position: center;
position: absolute;
width: 100%;
height: 100%;
}
.page-footer_background-svg {
width: 100%;
height: 100%;
fill: white;
}
.floating-action-button {
width: 57px;
height: 57px;
position: absolute;
top: -22px;
right: 20px;
border-radius: 100%;
border: 5px solid white;
background: white;
box-shadow: 4px 1px 10px rgba(0, 0, 0, 0.2);
.floating-action-button-inner {
width: $floating-action-button-size;
height: $floating-action-button-size;
background: white;
position: absolute;
border-radius: 100%;
top: -1px;
left: -1px;
cursor: pointer;
border: 1px solid $color-daimler-petrol-d2;
text-align: center;
}
.floating-action-button-sub-buttons {
margin: 0;
padding: 0;
position: absolute;
left: ($floating-action-button-size - $floating-action-sub-button-size) * 0.5;
top: -5px;
}
.floating-action-button-sub-buttons.fab-hidden {
height: 0;
overflow: hidden;
}
.floating-action-button-sub-button {
background: white;
width: $floating-action-sub-button-size;
height: $floating-action-sub-button-size;
border-radius: 100%;
margin: 0 0 $floating-action-sub-button-margin 0;
padding: 0;
list-style: none;
position: absolute;
text-align: center;
line-height: $floating-action-sub-button-size;
color: $color-daimler-petrol-d2;
cursor: pointer;
opacity: 0;
transform: translate3d(0, 30px, 0);
//z-index: 500 !important;
span:nth-child(1) {
transition: ease opacity 0.3s 0.1s;
opacity: 0;
position: absolute;
text-align: right;
right: $floating-action-sub-button-size;
width: 200px;
padding-right: 10px;
color: #FFFFFF;
}
span:nth-child(2) .icon {
font-size: 18px;
}
}
.floating-action-button-sub-buttons.fab-visible .floating-action-button-sub-button {
opacity: 1;
transform: translate3d(0, 0, 0);
span:nth-child(1) {
opacity: 1;
transition: ease opacity 0.3s 0.6s;
}
}
}
#for $i from 1 through 10 {
.floating-action-button-sub-button:nth-child(#{$i}) {
transition: all ease-out 0.4s #{0.1 * $i}s;
top: #{(strip-unit($floating-action-sub-button-size) + strip-unit($floating-action-sub-button-margin)) * $i * -1}px;
}
.floating-action-button-sub-buttons.fab-hidden .floating-action-button-sub-button:nth-last-child(#{$i}) {
transition: all ease-out 0.1s #{0.03 * $i}s;
}
}
.floating-action-button-burger {
position: relative;
transform: rotate(0deg);
transition: 0.2s ease-in-out;
cursor: pointer;
top: 18px;
left: 14px;
span {
display: block;
position: absolute;
height: 1px;
width: $floating-action-button-burger-width;
background: $color-daimler-petrol-d2;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: ease transform 0.2s, ease opacity 0.3s 0.2s, ease top 0.3s 0.2s;
}
}
.floating-action-button-inner {
span:nth-child(1) {
top: 0;
}
span:nth-child(2), span:nth-child(3) {
top: $floating-action-button-burger-margin;
}
span:nth-child(4) {
top: $floating-action-button-burger-margin * 2;
}
}
.floating-action-btn-active .floating-action-button-inner {
span {
transition: ease transform 0.2s 0.3s, ease opacity 0.3s, ease top 0.3s;
}
span:nth-child(1) {
top: $floating-action-button-burger-margin;
opacity: 0;
}
span:nth-child(2) {
transform: rotate(45deg);
}
span:nth-child(3) {
transform: rotate(-45deg);
}
span:nth-child(4) {
top: $floating-action-button-burger-margin;
opacity: 0;
}
}
.floating-action-button-pill {
position: absolute;
left: -29px;
top: 42px;
padding: 2px;
border: 1px solid $brand-primary;
background: white;
border-radius: 100%;
}
.floating-action-button-pill-inner {
padding: 5px 7px;
background: $brand-primary;
border-radius: 100%;
text-align: center;
line-height: 20px;
min-width: 30px;
min-height: 30px;
}
I am having a problem getting a underline bar to animate under a text link. You can see a working example here: http://tobiasahlin.com/blog/css-trick-animating-link-underlines/
The animation works fine in all browsers except for Safari 5.1.7. What am I doing wrong? Here is my code snippet:
EDIT: Sorry about that, I added the html and more of the CSS rules. I hope that helps.
.infiniteNav{
width: 100%;
height: 56px;
background-color: #9e0707;
background: linear-gradient(#c71e1e, #800909);
background: -webkit-linear-gradient(#c71e1e, #800909);
position: absolute;
top: 271px;
z-index: -2;
}
nav{
width: 955px;
height: 56px;
float: left;
text-align: center;
display: block;
background-color: #9e0707;
background: linear-gradient( #c71e1e, #800909);
background: -webkit-linear-gradient(#c71e1e, #800909);
}
nav a{
position: relative;
font-size: 25px;
font-family: arial;
color: #e0e0e0;
text-decoration: none;
font-weight: bold;
margin: 0px 15px;
line-height: 55px;
}
/********************************************************************************************************
This is the animated underline bar. *
********************************************************************************************************/
nav a:before{
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #e0e0e0;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
/*-webkit-transition: all 0.3s ease-in-out 0s;*/
-webkit-transition-property: all;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-in-out;
-webkit-transition-delay: 0s;
transition: all 0.3s ease-in-out 0s;
}
nav a:hover:before{
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
color: #e0e0e0;
}
nav a:active{
color: #e0e0e0;
}
<nav>
Home
Shop
Sales
Catalog
Events
Contact
About us
Partners
</nav>
I have this code: https://jsfiddle.net/e0u4sow1/6/
It works, I added a arrow beneath the text when you hover over the image. I want that arrow to slide in from the left to the center with a slow end and when you move your mouse away to slide right with a slow start. I spend 2 hours now trying many things to get this to work, but I give up. Can someone help me with this? also maybe a small explanation as to what part in the code makes the arrow slide in and out? I removed all code with arroweffect relations, so it's just the original effect with the arrow added
.media {
display: inline-block;
position: relative;
vertical-align: top;
}
.media__image {
display: block;
}
.media__body {
background: rgba(41, 128, 185, 0.7);
bottom: 0;
color: white;
font-size: 1em;
left: 0;
opacity: 0;
overflow: hidden;
padding: 3.75em 3em;
position: absolute;
text-align: center;
top: 0;
right: 0;
-webkit-transition: 0.6s;
transition: 0.6s;
}
.media__body:hover {
opacity: 1;
}
.media__body:after,
.media__body:before {
border: 1px solid rgba(255, 255, 255, 0.7);
bottom: 1em;
content: '';
left: 1em;
opacity: 0;
position: absolute;
right: 1em;
top: 1em;
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: 0.6s 0.2s;
transition: 0.6s 0.2s;
}
.media__body:before {
border-bottom: none;
border-top: none;
left: 2em;
right: 2em;
}
.media__body:after {
border-left: none;
border-right: none;
bottom: 2em;
top: 2em;
}
.media__body:hover:after,
.media__body:hover:before {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.media__body h2 {
margin-top: 0;
}
.media__body p {
margin-bottom: 1.5em;
}
.arr {
display: inline-block;
padding: 1.2em;
box-shadow: 8px 8px 0 2px #FFF inset;
transform: rotate(135deg);
}
<h1>MR Cube</h1>
<div class="media">
<a href="http://www.google.nl/">
<img alt="" class="media__image" src="http://www.webwinkelsucces.nl/wp-content/uploads/2015/05/1112625-les-outils-de-test-et-d-integration-continue-open-source.jpg" />
<div class="media__body">
<h1>Lees meer</h1>
<div class="arr"></div>
</div>
</a>
As you didn't post your try to make the animation, it's hard to explain what you did wrong.
I made the animation in the following example adding translate on the arrow and removing it on hover. The transition decalration makes the animation between both states.
.media {
display: inline-block;
position: relative;
vertical-align: top;
}
.media__image {
display: block;
}
.media__body {
background: rgba(41, 128, 185, 0.7);
bottom: 0;
color: white;
font-size: 1em;
left: 0;
opacity: 0;
overflow: hidden;
padding: 3.75em 3em;
position: absolute;
text-align: center;
top: 0;
right: 0;
-webkit-transition: 0.6s;
transition: 0.6s;
}
.media__body:hover {
opacity: 1;
}
.media__body:after,
.media__body:before {
border: 1px solid rgba(255, 255, 255, 0.7);
bottom: 1em;
content: '';
left: 1em;
opacity: 0;
position: absolute;
right: 1em;
top: 1em;
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: 0.6s 0.2s;
transition: 0.6s 0.2s;
}
.media__body:before {
border-bottom: none;
border-top: none;
left: 2em;
right: 2em;
}
.media__body:after {
border-left: none;
border-right: none;
bottom: 2em;
top: 2em;
}
.media__body:hover:after,
.media__body:hover:before {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.media__body h2 {
margin-top: 0;
}
.media__body p {
margin-bottom: 1.5em;
}
.arr {
display: inline-block;
padding: 1.2em;
box-shadow: 8px 8px 0 2px #FFF inset;
transform: translateX(250px) rotate(135deg);
transition: transform .8s ease-in;
}
.media__body:hover .arr {
transform: translateX(0) rotate(135deg);
transition-timing-function: ease-out;
}
<div class="media">
<a href="http://www.google.nl/">
<img alt="" class="media__image" src="http://www.webwinkelsucces.nl/wp-content/uploads/2015/05/1112625-les-outils-de-test-et-d-integration-continue-open-source.jpg" />
<div class="media__body">
<h1>Lees meer</h1>
<div class="arr"></div>
</div>
</a>
Note that you will need to add the vendor prefixes to the transition and transform properties for browser support (see canIuse for 2D transform and transitions)
I would also suggest you read up on MDN about transforms and transitions.
I would like both to behave like webkit, but for some reason in webkit works as I expected but -moz- does the animation when mouseout the .porftolio item,
Any idea why?
CSS:
.portfolio-item {
float: left;
width: 300px;
height: 300px;
margin: 0.5%;
position: relative;
text-align: center;
background: orange;
overflow: hidden;
-webkit-transition: 0.4s all ease;
-moz-transition: 0.4s all ease;
transition: 0.4s all ease;
}
.portfolio-item a:hover:after {
content: " ";
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(255, 255, 255, 0.4), transparent 100%);
}
.portfolio-item h4, .portfolio-item img {
-webkit-transition: 0.4s all ease;
-moz-transition: 0.4s all ease;
transition: 0.4s all ease;
}
.portfolio-item img {
width: 100%;
hegight: 100%;
position: absolute;
top: 0;
left: 0;
}
.portfolio-item:before {
content: '';
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
zoom: 1;
*display: inline;
height: 100%;
vertical-align: middle;
}
.portfolio-item h4 {
opacity: 0;
color: white;
font-size: 30px;
vertical-align: middle;
/*#include transform(scale(.5));*/
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
zoom: 1;
*display: inline;
/* sino en safari no va */
width: 200px;
font-weight: bold;
text-transform: uppercase;
-webkit-transform: translateX(-2px);
-moz-transform: translateX(-2px);
-ms-transform: translateX(-2px);
transform: translateX(-2px);
}
.portfolio-item:hover {
z-index: 9;
}
.portfolio-item:hover img {
opacity: 0;
-webkit-transform: scale(1.07);
-moz-transform: scale(1.07);
-ms-transform: scale(1.07);
transform: scale(1.07);
}
.portfolio-item:hover h4 {
-webkit-transform: translateX(3px);
-moz-transform: translateX(3px);
-ms-transform: translateX(3px);
transform: translateX(3px);
/*-webkit-animation-duration: 0.4s;
-webkit-transform-origin:50% 50%;
-webkit-animation-timing-function: linear;
-moz-animation-duration: 0.4s;
-moz-transform-origin:50% 50%;
-moz-animation-timing-function: linear;
-webkit-animation-name: shake;
-moz-animation-name: shake;
-o-animation-name: shake;
animation-name: shake;*/
opacity: 1;
}
HTML:
<ul><li class="portfolio-item" style="background-color: #6220E5;">
<a href="#">
<img src="http://dummyimage.com/300x300/dddddd/cccccc" alt="camper" />
<h4>Text goes here</h4>
</a>
</li></ul>
Test:
http://jsfiddle.net/kuX39/
-EDIT-
Funny thing is that I noticed that if instead of applying it to :hover i apply it to .hover and toggle the class then the animations works the same... :S
The problem comes from this rule:
.portfolio-item a:hover:after {
content: " ";
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(255, 255, 255, 0.4), transparent 100%);
}
where you define all the after pseudoelement only in the hover state. If the a element is not hovered, the pseudo element is undefined, and can take whatever value the browser decides.
If you set the same on the un-hovered element, it works fine.
.portfolio-item a:after {
content: " ";
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(255, 255, 255, 0.4), transparent 100%);
}
updated demo
By the way, my firefox version is using transition and not moz-transition