I am adding a class to an hr element that grows when it has this class. It is working nicely in chrome but not on firefox. I have inspected and it is adding the class so the css is not working.
Any ideas?
hr.portfolio-line {
width: 0px;
background-color: #fff;
border: none;
height: 2px;
z-index: 8;
position: relative;
}
hr.portfolio-line.grow {
-webkit-transition: width 1s ease-out;
-moz-transition: width 1s ease-out;
-o-transition: width 1s ease-out;
transition: width 1s ease-out;
width: 100px;
}
Related
I was practicing css on an example i found. I tried to show the submenu above the nav with transition effects. I can change the position of the submenu on hover :
nav li:hover .menu-sub {
display: block;
transform: translateY(-100%);
}
I also modified the code to add a transition effect:
.menu-sub {
position: absolute;
left: 0;
background: #444;
width: 100%;
display: none;
color: #fff;
padding: 2em;
-webkit-transition: -webkit-transform 1.5s ease;
-moz-transition: -moz-transform 1.5s ease;
-o-transition: -o-transform 1.5s ease;
transition: transform 1.5s ease;
}
The position changed but I don't see any transition effect at all. What am i doing wrong ?
Please modify the transition to shown below, it was written wrong.
.menu-sub {
position: absolute;
left: 0;
background: #444;
width: 100%;
opacity:0;
overflow:hidden;
box-sizing:border-box;
height:0px;
color: #fff;
-webkit-transition: opacity 1.5s ease-out;
-moz-transition: opacity 1.5s ease-out;
-o-transition: opacity 1.5s ease-out;
transition: opacity 1.5s ease-out;
}
Transition does not work with display, instead use the below effect.
Codepen Demo
Where we can toggle the height from 0px to auto(full height) and opacity from 0(invisible) to 1(visible). You can see that we only see the animation on opacity, this will produce the best effect.
Use visibility:hidden then visible
display: none disables it in the active DOM and such elements with this CSS can't be selected for stuffs like animations.
.menu-sub {
position: absolute;
left: 0;
background: #444;
width: 100%;
visibility: hidden;
color: #fff;
padding: 2em;
transition: transform 1.5s ease;
}
nav li:hover .menu-sub {
visibility: visible;
transform: translateY(-100%);
}
I have a button which is animated using :after and :hover:after CSS. Tried numerous ways to get it to work in IE but cannot find a work around. May be because the empty content:"", or the transition, but even without the transition is doesn't work. Any help / explanations is greatly appreciated.
button.bttnStyle1 {
background: none;
border: none;
font-size: 14rem;
text-transform: uppercase;
position: relative;
padding: 0rem;
cursor: pointer;
}
button.bttnStyle1:after,
button.bttnStyle1::after {
display: block;
position: absolute;
left: 0;
bottom: -5rem;
width: 3rem;
height: 3rem;
border-radius: 3rem;
content: "";
-o-transition: width 0.4s ease, height 2s ease-out;
-moz-transition: width 0.4s ease, height 2s ease-out;
-webkit-transition: width 0.4s ease, height 2s ease-out;
transition: width 0.4s ease, height 2s ease-out;
}
button.bttnStyle1:hover {}
button.bttnStyle1:hover:after,
button.bttnStyle1:hover::after {
width: 100%;
height: 2rem;
-o-transition: width 0.4s ease, height 2s ease-out;
-moz-transition: width 0.4s ease, height 2s ease-out;
-webkit-transition: width 0.4s ease, height 2s ease-out;
transition: width 0.4s ease, height 0.2s ease;
}
button.bttnStyle1:focus {
outline: none;
}
button.bttnColorGreen {
color: #69e0b1;
}
button.bttnColorGreen:after{
background-color:#69e0b1;
}
<button type="button" class="bttnStyle1 bttnColorGreen">BUTTON</button>
Codepen
Add overflow: visible; to your button. Found this solution here.
Solition:
CSS border radius need an actual border to be defined. Overflow also needed to be visible and everything works.
button.bttnStyle1:after,
button.bttnStyle1::after {
display: block;
position: absolute;
left: 0;
bottom: -5rem;
width: 0rem;
height: 0rem;
line-height:0;
border-radius:1rem;
content: "";
-o-transition: width 0.4s ease, height 2s ease-out;
-moz-transition: width 0.4s ease, height 2s ease-out;
-webkit-transition: width 0.4s ease, height 2s ease-out;
transition: width 0.4s ease, height 2s ease-out;
}
button.bttnColorGreen:after,
button.bttnColorGreen::after{
border:1rem solid #69e0b1;
background-color:#69e0b1;
}
I'm having a issue with a transition css property in a button tag.
When I hover the button I supposed it will go smoothly to width:auto, but it jump directly.
This is the code, what did I miss?
<button>Hello</button>
button {
padding: 10px;
width: 30px;
overflow:hidden;
transition: width 400ms ease-in-out;
-webkit-transition: width 400ms ease-in-out;
-moz-transition: width 400ms ease-in-out;
}
button:hover {
width: auto;
}
max-width is your friend
Demo
button {
padding: 10px;
width: auto;
max-width: 30px;
overflow:hidden;
transition: max-width 400ms ease-in-out;
-webkit-transition: max-width 400ms ease-in-out;
-moz-transition: max-width 400ms ease-in-out;
}
button:hover {
max-width: 100%;
}
Transition won't work with width: auto; you have to give a value in px, ems, percentage or whatever...
I'm quite new to CSS and HTML and I want to create an image that zooms in fast when you hover. But the box radius zooms in as well. I know I'm doing something wrong with my div classes but I can't figure out what exactly.
So I mean I want an effect like this:
http://designshack.net/tutorialexamples/imagehovers/zoomandpan.html
(the blonde girl one)
This is the relevant code:
#circle {
border: 4px solid;
height:200px;
width:200px;
border-color: #000;
border-radius: 100px;
}
.bolimg{
background: url('http://i60.tinypic.com/wb82e0.jpg') no-repeat;
height:200px;
width:200px;
-webkit-border-radius: 100px;
-webkit-transition: 2s ease-out;
-moz-transition: 2s ease-out;
-o-transition: 2s ease-out;
-ms-transition: 2s ease-out;
transition: 2s ease-out;
}
.bolimg:hover {
opacity:1;
background-image: url('http://i59.tinypic.com/k0szuv.jpg');
-webkit-transition: 2.5s ease-out;
-moz-transition: 2.5s ease-out;
-o-transition: 2.5s ease-out;
-ms-transition: 2.5s ease-out;
transition: 2.5s ease-out;
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
and this is the body
<div id="circle" class="bolimg">
</div>
</div>
Excuse my english it's very bad and I'm sorry if this is a stupid question. Thanks in advance.
Place the background image div within a container:
<div class="container">
<div class="bolimg"></div>
</div>
Move the dimensions and border to the container, and give it overflow: hidden:
.container {
width: 200px;
height: 200px;
border: 4px solid black;
border-radius: 100px;
overflow: hidden;
}
Use these styles for the bolimg class:
.bolimg {
background: url('http://i60.tinypic.com/wb82e0.jpg') no-repeat;
background-size: cover;
width: 100%;
height: 100%;
transition: 2s ease-out;
}
And use these styles on its hover:
.bolimg:hover {
background-image: url('http://i59.tinypic.com/k0szuv.jpg');
height: 125%;
width: 125%;
}
Animating height and width instead of scale solves a problem with Chrome and borders.
Complete code:
.container {
width: 200px;
height: 200px;
overflow: hidden;
border: 4px solid black;
border-radius: 100px;
}
.bolimg {
background: url('http://i60.tinypic.com/wb82e0.jpg') no-repeat;
background-size: cover;
width: 100%;
height: 100%;
-webkit-transition: 2s ease-out;
-moz-transition: 2s ease-out;
-o-transition: 2s ease-out;
-ms-transition: 2s ease-out;
transition: 2s ease-out;
}
.bolimg:hover {
background-image: url('http://i59.tinypic.com/k0szuv.jpg');
height: 125%;
width: 125%;
}
<div class="container">
<div class="bolimg"></div>
</div>
you need to add an overflow: hidden; style to the #circle element and make the .bolimg a nested <div>.
See snippet:
#circle {
border: 4px solid;
height:200px;
width:200px;
border-color: #000;
border-radius: 100px;
overflow:hidden;
}
.bolimg{
background: url('http://i60.tinypic.com/wb82e0.jpg') no-repeat;
height:200px;
width:200px;
-webkit-border-radius: 100px;
-webkit-transition: 2s ease-out;
-moz-transition: 2s ease-out;
-o-transition: 2s ease-out;
-ms-transition: 2s ease-out;
transition: 2s ease-out;
}
.bolimg:hover {
opacity:1;
background-image: url('http://i59.tinypic.com/k0szuv.jpg');
-webkit-transition: 2.5s ease-out;
-moz-transition: 2.5s ease-out;
-o-transition: 2.5s ease-out;
-ms-transition: 2.5s ease-out;
transition: 2.5s ease-out;
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
<div id="circle">
<div class="bolimg"></div>
</div>
Looks cool in Firefox but Chrome does some ugly transitions -.-
I'm trying to make an affect on a box to drop 5px down when hovering.
It does work smoothly on Chrome but on firefox it's doesn't do the transition.
Please have a look at the next codepen using firefox and using chrome
<div class="test"></div>
.test {
background-color:blue;
width: 200px;
height: 200px;
#include transition(transform .3s 0 ease);
#include transform(translateY(0));
&:hover {
#include transform(translateY(5px));
}
}
Using Padding
Here's my preferred method using only padding:
JSFiddle DEMO
CSS:
body {
margin: 0;
padding: 0;
}
.test {
background-color:blue;
width: 200px;
height: 200px;
}
.test:hover {
margin-top: 10px;
}
.transition {
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
transition: margin 0.5s ease-out;
}
Using Transform
Or if you still want to use transform:
JSFiddle DEMO
CSS:
body {
margin: 0;
padding: 0;
}
.test {
background-color:blue;
width: 200px;
height: 200px;
}
.test:hover {
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10p));
-o-transform: translateY(10px);
transform: translateY(10px);
}
.transition {
-webkit-transition: -webkit-transform 0.5s ease-out;
-moz-transition: -moz-transform 0.5s ease-out;
-o-transition: -o-transform 0.5s ease-out;
transition: transform 0.5s ease-out;
}
As Kiran said already, each browser has varying support for directly using transform and transition. You can check who can use transforms here and transitions here.
Also take note that the transition wasn't applied to the :hover. It needs to be called at the base level (in this case at the div level).
Hi i guess will might help you out http://codepen.io/anon/pen/dHBni
check below css to find transitions property for different browsers
.box {
width: 150px;
height: 150px;
background: red;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
cursor: pointer;
}
.box:hover {
background-color: green;
}
for more information about transition http://css3.bradshawenterprises.com/transitions/