Everything else is working with the transitions etc... however when it sets the background-color it does not fade in but just instantly changes the colour. Anyone have any ideas?
Fiddle: https://jsfiddle.net/0zortp3g/1/
menuBackground is the class that gets set.
CSS:
header {
width: 100%;
height: 100%;
top: 0;
-webkit-transition: height 0.5s;
-moz-transition: height 0.5s;
-ms-transition: height 0.5s;
-o-transition: height 0.5s;
transition: height 0.5s;
-webkit-transition: top 0.5s;
-moz-transition: top 0.5s;
-ms-transition: top 0.5s;
-o-transition: top 0.5s;
transition: top 0.5s;
background-color: transparent;
-webkit-transition: background-color 1s ease;
-moz-transition: background-color 1s ease;
-ms-transition: background-color 1s ease;
-o-transition: background-color 1s ease;
transition: background-color 1s ease;
.header-toolbar {
-webkit-transition: top 0.5s;
-moz-transition: top 0.5s;
-ms-transition: top 0.5s;
-o-transition: top 0.5s;
transition: top 0.5s;
top: 35px;
}
h1 {
&.header-logo {
img {
display: inline-block;
height: 72px;
line-height: 72px;
float: left;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
}
}
nav {
&.header-desktop-nav {
position: relative;
top: 25px;
ul {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.header-nav-links {
.home {
padding-right: 26px;
}
}
}
}
&.smaller {
height: 100px;
position: fixed !important;
top: 0px;
-webkit-transition: top 0.5s;
-moz-transition: top 0.5s;
-ms-transition: top 0.5s;
-o-transition: top 0.5s;
transition: top 0.5s;
&.homepage {
top: 42px;
-webkit-transition: top 0.5s;
-moz-transition: top 0.5s;
-ms-transition: top 0.5s;
-o-transition: top 0.5s;
transition: top 0.5s;
}
h1 {
&.header-logo img {
height: 45px;
line-height: 45px;
}
}
nav {
&.header-desktop-nav {
top: 10px;
}
}
.header-toolbar {
-webkit-transition: top 0.5s;
-moz-transition: top 0.5s;
-ms-transition: top 0.5s;
-o-transition: top 0.5s;
transition: top 0.5s;
top: 50px !important;
float: right;
z-index: 1;
}
}
&.menuBackground {
background-color: #333333 !important;
-webkit-transition: background-color 1s ease;
-moz-transition: background-color 1s ease;
-ms-transition: background-color 1s ease;
-o-transition: background-color 1s ease;
transition: background-color 1s ease;
}
}
Related
I am trying to add some animation for my CSS class
Here's code:
#primary_nav_wrap li a:hover:after {
height: 4px;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
background-color: #23a298;
bottom: 0;
content: "";
left: 0;
right:0;
margin-left:auto;
margin-right:auto;
position: absolute;
top: 96px;
width: calc(100% - 15px);
-webkit-transition: color 0.4s ease-out;
-moz-transition: color 0.4s ease-out;
-o-transition: color 0.4s ease-out;
-ms-transition: color 0.4s ease-out;
transition: color 0.4s ease-out;
}
Everything is fine, but this part does not work:
-webkit-transition: color 0.4s ease-out;
-moz-transition: color 0.4s ease-out;
-o-transition: color 0.4s ease-out;
-ms-transition: color 0.4s ease-out;
transition: color 0.4s ease-out;
Add this code to your a:after
#primary_nav_wrap li a:after {
height: 4px;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
bottom: 0;
content: "";
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
position: absolute;
top: 96px;
width: calc(100% - 15px);
-webkit-transition: background-color 0.4s ease-out;
-moz-transition: background-color 0.4s ease-out;
-o-transition: background-color 0.4s ease-out;
-ms-transition: background-color 0.4s ease-out;
transition: background-color 0.4s ease-out;
}
You don't put the transition effect on the hover, also, you didn't mention which style should get the transition so I gave it to the background-color
Example:
https://jsfiddle.net/7o2mw6ng/
Try placing the transition on the element without the hover applied:
#primary_nav_wrap li a:after {
-webkit-transition: color 0.4s ease-out;
-moz-transition: color 0.4s ease-out;
-o-transition: color 0.4s ease-out;
-ms-transition: color 0.4s ease-out;
transition: color 0.4s ease-out;
}
Edit: You're changing the colour on the a tag so you need to apply the transition there.
#primary_nav_wrap ul a {
-webkit-transition: color 0.4s ease-out;
-moz-transition: color 0.4s ease-out;
-o-transition: color 0.4s ease-out;
-ms-transition: color 0.4s ease-out;
transition: color 0.4s ease-out;
}
See jsfiddle here.
I've been struggling with creating a page on which I can display multiple images which, on hover, will enlarge approximately 80% of the page width.
To do this, based on the answers of other questions on here, I have used transform: scale ().
The problem I face is that this seems to result in the images overlapping when enlarged.
What I'm hoping to achieve is for the images to push each other down the page when enlarging, rather than going over or under.
Please excuse my messing attempt at solving this. Coding in general is very new to me.
https://jsfiddle.net/msandford/zjrc7v6s/
.image1 { `display:block;
position: relative;
width: 10%;
left:40%;
height: auto;
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
z-index:1;
}
.image1:hover {
display:block;
position: relative;
transform: scale(4);
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
z-index:1;
}
.image2 {
display:block;
position: relative;
width: 10%;
left:40%;
height: auto;
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
z-index:1;
}
.image2:hover {
display:block;
position: relative;
transform: scale(4);
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
z-index:1;
}
.image3 {
display:block;
position: relative;
width: 10%;
left:40%;
height: auto;
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
z-index:1;
}
.image3:hover {
display:block;
position: relative;
transform: scale(4);
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
z-index:1;
}
Thanks in advance.
The scale() function keeps the bounding box of the original element thus not pushing the other images, I could have played around with adding a margin (top and bottom) but then the image jumps around so I opted for just using the width property (why not? what was your initial question that led to scale()?)
#scale {
text-align: center; /* to align all inline content inside the div */
}
#scale img {
width: 150px;
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
}
#scale img:hover {
width: 80%;
}
<div id="scale">
<img src="http://lorempixel.com/output/food-q-c-640-480-10.jpg"><br>
<img src="http://lorempixel.com/output/food-q-c-640-480-10.jpg"><br>
<img src="http://lorempixel.com/output/food-q-c-640-480-10.jpg">
</div>
Also I think I should point out that you were using classes wrong.
A class is a string that you would apply to all of the images and then you can do .scalethis{} in css to apply that to all of your images at once.
How you were using it was like how you should use id
I created a simple effect that causes an image to change color on hover. Now I want to add transition-timing-function properties so the color transition fades in and out rather than an instant change, but I can't seem to get it to work. Any ideas?
Here's the code:
div {
position: relative;
display: inline-block;
-webkit-transition: all 500ms ease-out 1s;
-moz-transition: all 500ms ease-out 1s;
-o-transition: all 500ms ease-out 1s;
transition: all 500ms ease-out 1s;
}
img {
width: 100%;
height: 100%;
}
div:hover::after {
position: absolute;
z-index: 1;
background-color: Indigo;
opacity: 0.4;
left: 0;
top: 0;
height: 100%;
width: 100%;
content: '';
Thanks!
There are two problems with your code:
The ::after selector works as a separate element, so having the transitions on the div won't work, they need to be applied to the ::after.
The :hover::after selector needs something to transition from.
This should work:
div {
position: relative;
display: inline-block;
}
img {
width: 100%;
height: 100%;
}
div::after {
-ms-transition: all 500ms ease-out 1s;
transition: all 500ms ease-out 1s;
position: absolute;
z-index: 1;
background-color: transparent;
opacity: 0.4;
left: 0;
top: 0;
height: 100%;
width: 100%;
content: '';
}
div:hover::after {
background-color: Indigo;
}
Somebody also shared this code with me, which seems to do the same thing by wrapping the image in a span class:
.imghov {
display: inline-block;
background-color: #fff;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.13ss linear;
transition: all 0.3s linear;
}
.imghov img {
opacity: 1;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.imghov:hover {
background-color: indigo;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
}
imghov:hover,
.imghov:hover img {
opacity: 0.6;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
}
I have the following style on hover:
li:hover a {
left: 65px;
}
I know I can animate this with jQuery, but can it be animated with CSS3 alone?
This did not work:
li:hover a {
left: 65px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
You have to use this css:
li:hover {
left: 0px;
}
li:hover a {
left: 65px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
you have to set position if you want to use 'left' otherwise use 'margin-left'
here is an example: FIDDLE
I've got a <span> with some text in it and when you hover over it an image comes sliding down the page. So far so good. However, when your mouse accidentally hovers over the image, the animation will be stopped. I do not want that.
.coffee {
-webkit-transition: color 0.2s linear;
-moz-transition: color 0.2s linear;
-o-transition: color 0.2s linear;
-ms-transition: color 0.2s linear;
transition: color 0.2s linear;
z-index: 10;
}
.coffee:hover {
color: #B88A00;
}
.coffee img {
position: absolute;
display: block;
height: 100px;
width: 100px;
z-index: 1;
left: 280px;
top: 50px;
opacity: 0;
-webkit-transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
-moz-transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
-o-transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
-ms-transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
.coffee:hover img {
top: 150px;
opacity: 1;
}
Any help would be much appreciated.
As per i understand may be that's you want. Write like this:
HTML
<span class="coffee"><u>coffee</u></span>!
<img src="image.jpg" alt="Coffee!"/>
CSS
.coffee:hover + img{
top: 150px;
opacity: 1;
}
Check this http://jsfiddle.net/quLKb/2/
You can use the pointer-events attribute. If you set it to none, mouse events are omitted on elements with that css-rule applied.
.coffee img {
pointer-events: none;
}
Here's the modified example: http://jsfiddle.net/kFd9g/