I have a problem with my image which is inside a div.
This div with swiper__content class gives kind of bottom padding to the image and I can't see what cause this effect. I have a 100% height with no padding or margin so it might fit in the div
.no-padding{
padding: 0px 0px !important;
}
.swiper {
margin: 0 auto 50px;
width: 40%;
text-align: center;
padding: 10px 20px;
font-size: 10vw;
line-height: 1;
position: relative;
overflow: hidden;
text-transform: uppercase;
font-family: "Impact";
cursor: pointer;
}
.swiper__content {
color: transparent;
display: block;
}
.swiper .swiper__content img{
opacity: 0;
width: 100%;
height: 100%;
transition: opacity 0s ease-in 0.5s;
-moz-transition: opacity 0s ease-in 0.5s;
-webkit-transition: opacity 0s ease-in 0.5s;
-o-transition: opacity 0s ease-in 0.5s;
}
.swiper__bar, .swiper__bar--right {
width: 100%;
height: 100%;
background: orange;
display: block;
position: absolute;
top: 0;
left: 0;
transform: translateX(-100%);
transition: 1s ease-in-out;
}
.swiper__bar--right {
transform: translateX(100%);
}
.swiper.revealed .swiper__content {
animation-name: kf-font-reveal;
animation-duration: 1s;
color: orange;
}
.swiper.revealed .swiper__content img{
opacity: 1;
}
<div class="swiper no-padding revealed">
<div class="swiper__content">
<img src="http://lorempicsum.com/futurama/350/200/1">
</div>
<span class="swiper__bar--right"></span>
</div>
Is there a way to remove that ?
Set line-height: 0 for your swiper class.
.no-padding{
padding: 0px 0px !important;
}
.swiper {
margin: 0 auto 50px;
width: 40%;
text-align: center;
padding: 10px 20px;
font-size: 10vw;
line-height: 0;
position: relative;
overflow: hidden;
text-transform: uppercase;
font-family: "Impact";
cursor: pointer;
}
.swiper__content {
color: transparent;
display: block;
}
.swiper .swiper__content img{
opacity: 0;
width: 100%;
height: 100%;
transition: opacity 0s ease-in 0.5s;
-moz-transition: opacity 0s ease-in 0.5s;
-webkit-transition: opacity 0s ease-in 0.5s;
-o-transition: opacity 0s ease-in 0.5s;
}
.swiper__bar, .swiper__bar--right {
width: 100%;
height: 100%;
background: orange;
display: block;
position: absolute;
top: 0;
left: 0;
transform: translateX(-100%);
transition: 1s ease-in-out;
}
.swiper__bar--right {
transform: translateX(100%);
}
.swiper.revealed .swiper__content {
animation-name: kf-font-reveal;
animation-duration: 1s;
color: orange;
}
.swiper.revealed .swiper__content img{
opacity: 1;
}
<div class="swiper no-padding revealed">
<div class="swiper__content">
<img src="http://lorempicsum.com/futurama/350/200/1">
</div>
<span class="swiper__bar--right"></span>
</div>
Related
How can I keep the black box on hover, to be only visible sliding out inside the box-1 div?
.description {
position: absolute;
background: black;
width: 100%;
height: 200px;
bottom: -100%;
visibility: hidden;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;}
.box-1:hover .description
{
visibility: visible;
bottom: 0;
}
.grid-item {
background: rgba(6, 108, 121, 0.322);
position: relative;
border: 3px solid white;
width: 100%;
height: 200px;
display: grid;
cursor: pointer;
place-items: center;
}
<div class="grid-item box-1">
<h2 class="consulting">Test</h2>
<div class="description"><p>Description</p>
</div>
You can add overflow: hidden; to your parent
.description {
position: absolute;
background: black;
width: 100%;
height: 200px;
bottom: -100%;
visibility: hidden;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.box-1:hover .description {
visibility: visible;
bottom: 0;
}
.grid-item {
background: rgba(6, 108, 121, 0.322);
position: relative;
border: 3px solid white;
width: 100%;
height: 200px;
display: grid;
cursor: pointer;
place-items: center;
overflow: hidden;
}
<div class="grid-item box-1">
<h2 class="consulting">Test</h2>
<div class="description">
<p>Description</p>
</div>
Add overflow: hidden; to the class grid-item
This will make the black box appear to slide from inside.
.description {
position: absolute;
background: black;
width: 100%;
height: 200px;
bottom: -100%;
visibility: hidden;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;}
.box-1:hover .description
{
visibility: visible;
bottom: 0;
}
.grid-item {
background: rgba(6, 108, 121, 0.322);
position: relative;
border: 3px solid white;
width: 100%;
height: 200px;
display: grid;
cursor: pointer;
place-items: center;
overflow: hidden;
}
<div class="grid-item box-1">
<h2 class="consulting">Test</h2>
<div class="description"><p>Description</p>
</div>
I have this JSfiddle. This is an in-progress section of my website. The problem I'm having with the snippet of code is that the text will not size properly when adjusting the CSS percentage values for the height, width, and, most importantly, the top and left positioning. I don't know if my positioning is incorrect or not. I'm not the best at knowing when to use what positions at what specific instances.
CODE:
#charset "utf-8";
/* CSS Document */
.Experience_Target {
display: inline-block;
}
.EXP1Box {
height: 100vh;
overflow: hidden;
}
#Hangar {
top: 0;
height: 50%;
}
#Virtual {
top: 0;
height: 50%;
}
.Hangar {
background: url(https://s8.postimg.cc/d56er2eut/Hangar_Phot.png);
height: 50%;
width: 100%;
background-position: 75%;
background-repeat: no-repeat;
transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-webkit-transition: all .5s ease;
-o-transition: all .5s ease;
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.Hangar:hover {
box-shadow: inset 0 0 0 150vw rgba(0, 0, 0, 0.7);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
/* IE 9 */
transform: scale(1.1);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand');
}
.NextEra {
position: relative;
width: 0%;
height: 0%;
top: 3.5%;
left: 40%;
z-index: 1;
transition: .5s ease;
-moz-transition: .5s ease;
-ms-transition: .5s ease;
-webkit-transition: .5s ease;
-o-transition: .5s ease;
}
.Hangar:hover .NextEra {
position: relative;
width: 70%;
height: auto;
top: 0.0%;
left: 26.3%;
z-index: 1;
}
h3 {
font-family: "Myriad Pro";
font-size: 63px;
color: white;
}
h4 {
font-family: "Myriad Pro";
font-size: 64px;
color: white;
}
.Hangar:hover .NextText1 {
position: relative;
top: 60%;
left: -18%;
z-index: 2;
font-style: italic;
}
.NextText1 {
position: relative;
top: -300%;
left: 0%;
z-index: 2;
}
.Hangar:hover .NextText2 {
position: relative;
top: -300%;
left: 2%;
z-index: 2;
width: 30%
}
.NextText2 {
position: relative;
top: 100%;
left: 18%;
z-index: 2;
}
<section class="EXP1Box">
<div class="Hangar">
<div class="NextEra">
<div class="NextEra">
<img alt="NextEra" src="https://s8.postimg.cc/h1jqn4zv9/Next_Era_Pop.png" class="NextEra">
</div>
<div class="NextText1">
<h4 class="NextText1">Future Ambitions</h4>
</div>
<div class="NextText2">
<h3 class="NextText2">Internship Position With:</h3>
</div>
</div>
</div>
<div class="Virtual">
</div>
</section>
What I want to happen is for the text to be small and off the page when someone is not hovering over the picture, but to become large and take up half of the side of the image once someone hovers over it - similar to the animation of the NextEra logo on the left. I just can't position any text at the current moment for some weird reason. Any help would be greatly appreciated.
I think one option for you would be to use display:none or visibility:hidden to hide the text when you don't want to display it, instead of messing with z-indexes and transitions. It wasn't very clear from your code whether you wanted the text to overflow the box when visible.. I positioned it so that it was all in the box. I adjusted the text sizes but if you want them smaller /bigger, you can tweak. I added color (just so I could see where they were to begin with).. again, tweakable.
Here's the fiddle and snippet:
#charset "utf-8";
/* CSS Document */
.Experience_Target {
display: inline-block;
}
.EXP1Box {
height: 100vh;
overflow: hidden;
}
#Hangar {
top: 0;
height: 50%;
}
#Virtual {
top: 0;
height: 50%;
}
.Hangar {
background: url(https://s8.postimg.cc/d56er2eut/Hangar_Phot.png);
height: 50%;
width: 100%;
background-position: 75%;
background-repeat: no-repeat;
transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-webkit-transition: all .5s ease;
-o-transition: all .5s ease;
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/*background-attachment: fixed;
Really wish I could make this work.
Fucks up because of zoom*/
}
.Hangar:hover {
box-shadow: inset 0 0 0 150vw rgba(0, 0, 0, 0.7);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
/* IE 9 */
transform: scale(1.1);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand');
}
.NextEra {
position: relative;
width: 0%;
height: 0%;
top: 3.5%;
left: 40%;
z-index: 1;
transition: .5s ease;
-moz-transition: .5s ease;
-ms-transition: .5s ease;
-webkit-transition: .5s ease;
-o-transition: .5s ease;
}
.Hangar:hover .NextEra {
position: relative;
width: 70%;
height: auto;
top: 0.0%;
left: 26.3%;
z-index: 1;
}
h3 {
font-family: "Myriad Pro";
font-size: 63px;
color: blue;
}
h4 {
font-family: "Myriad Pro";
font-size: 64px;
color: green;
}
.NextText1 {
color: forestgreen;
margin-left: 30px;
margin-top: 10px;
position: relative;
z-index: 2;
font-style: italic;
visibility: visible;
}
.Hangar:hover .NextText1 {
/*margin-left: 18%;
z-index: 2;*/
visibility: hidden;
}
.Hangar:hover .NextText2 {
position: fixed;
visibility: visible;
top: 10%;
left: 2%;
z-index: 2;
width: 30%;
margin-left: 18%;
font-size: 30px;
color: red;
}
.NextText2 {
visibility: hidden;
}
<section class="EXP1Box">
<div class="Hangar">
<div class="NextEra">
<div class="NextEra">
<img alt="NextEra" src="https://s8.postimg.cc/h1jqn4zv9/Next_Era_Pop.png" class="NextEra">
</div>
<div class="NextText1">
<h4 class="NextText1">Future Ambitions</h4>
</div>
<div class="NextText2">
<h3 class="NextText2">Internship Position With:</h3>
</div>
</div>
</div>
<div class="Virtual">
</div>
</section>
Trying to create a slide right transition on a button. If I remove the .container background color the transition works. But I want the button to start black and change to yellow while keeping the container color as default. But the output seems different. It will only transition to yellow if the button background is transparent. Any help is appreciated, been racking my brain way too long on this.
.container {
background: #F0F0F0;
margin: 20px 20%
}
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size: 14px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button:link:after, a.animated-button:visited:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 50%;
width: 150%;
z-index: -1;
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
}
a.animated-button:link:hover, a.animated-button:visited:hover {
color: #FFF;
}
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
height: 450%;
}
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size: 14px;
border-radius: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button.thar-three {
color: #fff;
cursor: pointer;
display: block;
position: relative;
border: 2px solid #F7CA18;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}
a.animated-button.thar-three:hover {
color: #000 !important;
}
a.animated-button.thar-three:hover:before {
left: 0%;
right: auto;
width: 100%;
}
a.animated-button.thar-three:before {
display: block;
position: absolute;
top: 0px;
right: 0px;
height: 100%;
width: 0px;
z-index: -1;
content: '';
color: #000 !important;
background: #F7CA18;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}
<div class="container">
<p>Register</p>
</div>
I adjust the code a bit and now the container is working well even with black background set. Its now animating from black to yellow. Additionally, I have also removed yellow border to create slick animation look.
Here is the working snippet.
.container {
background: #F0F0F0;
margin: 20px 20%
}
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size: 14px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button:link:after, a.animated-button:visited:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 50%;
width: 150%;
z-index: -1;
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
}
a.animated-button:link:hover, a.animated-button:visited:hover {
color: #FFF;
}
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
height: 450%;
}
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size: 14px;
border-radius: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
z-index: 1;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button.thar-three {
color: #fff;
cursor: pointer;
display: block;
position: relative;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
background-color: black;
}
a.animated-button.thar-three:hover {
color: #000 !important;
}
a.animated-button.thar-three:hover:before {
left: 0%;
right: auto;
width: 100%;
}
a.animated-button.thar-three:before {
display: block;
position: absolute;
top: 0px;
right: 0px;
height: 100%;
width: 0px;
z-index: -1;
content: '';
color: #000 !important;
background: #F7CA18;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}
<div class="container">
<p>Register</p>
</div>
As you've written it, your ::before pseudo-element is below the .container element, because both the .container and the anchor (a) are on the same z-index.
To place it in-between the anchor and the container, you need to make your anchor being above the container on the z-axis, i.e, set its z-index.
a.animated-button.thar-three {
color: #fff;
cursor: pointer;
display: block;
position: relative;
border: 2px solid #F7CA18;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
/* place it at a higher z-index than its parent ... */
z-index: 1;
}
a.animated-button.thar-three:before {
display: block;
position: absolute;
top: 0px;
right: 0px;
height: 100%;
width: 0px;
/* ... to make this be in-between .container and the a */
z-index: -1;
content: '';
color: #000 !important;
background: #F7CA18;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}
.container {
background: #F0F0F0;
margin: 20px 20%
}
a.animated-button:link,
a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size: 14px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button:link:after,
a.animated-button:visited:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 50%;
width: 150%;
z-index: -1;
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
}
a.animated-button:link:hover,
a.animated-button:visited:hover {
color: #FFF;
}
a.animated-button:link:hover:after,
a.animated-button:visited:hover:after {
height: 450%;
}
a.animated-button:link,
a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size: 14px;
border-radius: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button.thar-three:hover {
color: #000 !important;
}
a.animated-button.thar-three:hover:before {
left: 0%;
right: auto;
width: 100%;
}
<div class="container">
<p>Register</p>
</div>
Here I am trying to draw line between two different points on different canvas positioned using transform CSS. CSS places canvases with some angle between them
I have multiple canvases positioned using transform properties of css,
example:
var c1=document.getElementById('c1').getBoundingClientRect();
offsetX0=c1.left;
offsetY0=c1.top;
c2=document.getElementById('c2').getBoundingClientRect();
offsetX1=c2.left;
offsetY1=c2.top;
var x0=10+offsetX0;
var y0=30+offsetY0;
var x1=60+offsetX1;
var y1=60+offsetY1;
var w=Math.abs(x1-x0);
var h=Math.abs(y1-y0);
var overlay=document.getElementById('overlay');
overlay.width=w+2;
overlay.height=h+2;
overlay.style.left=(x0-1)+'px';
overlay.style.top=(y0-1)+'px';
var context=overlay.getContext('2d');
context.beginPath();
context.moveTo(1,1);//point on canvas1
context.lineTo(overlay.width-1,overlay.height-1);//point on canvas2
context.lineWidth=1;
context.stroke();
#overlay{position:absolute;bottom:5px;pointer-events:none;border:none;}
#container
{
width:500px;
height: 340px;
margin:80px auto;
position:relative;
perspective: 3500px;
perspective-origin: 100px -150px;
}
#shape {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
}
.ready #shape {
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
}
.ready #shape canvas
{
-webkit-transition: opacity 1s, -webkit-transform 1s;
-moz-transition: opacity 1s, -moz-transform 1s;
-o-transition: opacity 1s, -o-transform 1s;
transition: opacity 1s, transform 1s;
}
#shape canvas
{
display: block;
position: absolute;
width: 500px;
height: 340px;
left: 0px;
top: 0px;
border: 1px solid gray;
line-height: 116px;
font-size: 80px;
font-weight: bold;
color: green;
text-align: center;
}
#shape
{
border: 1px;
background-color: rgba(255, 255, 255, 0);
}
.ring {
position: absolute;
width: 500px;
height:340px;
text-align: center;
font-family: Times, serif;
font-size: 124pt;
color: black;
background-color: #F0F0F0;
}
.ring > .r1
{
translateZ(-144px);
transform: rotateY(0deg) translateZ(-250px);
background: transparent;
z-index: 1;
}
.ring > .r2
{
translateZ(-144px);
transform: rotateY(270deg) translateZ(-250px);
background: transparent;
z-index: 1;
}
.ring > .r3
{
translateZ(-144px);
transform: rotateY(0deg) translateZ(-250px);
background: transparent;
z-index: 1;
}
<div class="ready">
<div id="container">
<div id="shape" class="ring" class="panels-backface-invisible">
<canvas id="c1" class="ring r1" width="500" height="340"></canvas>
<canvas id="c2" class="ring r2"></canvas>
</div>
</div>
</div>
<canvas id="overlay"></canvas>
But when drawing, it does not match points specified on canvas and line drawn between points because canvas is transformed.
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