In this website I am making there is an arrow link that when you hover over it it becomes a new image with a cool addition to the image. I had this working completely fine with this code below and I did not edit the code at all but it seems that when I woke up the "all" transition no longer works for this. I can't find what is wrong. I am also using this to fade a background-image that is a solid color to fade to another background image that is a different solid color.
a.visitarrow
{
-webkit-transition:all 1.0s ease-in-out;
-moz-transition:all 1.0s ease-in-out;
-o-transition:all 1.0s ease-in-out;
-ms-transition:all 1.0s ease-in-out;
transition:all 1.0s ease-in-out;
display:block;
width:130;
height:121;
background-image:url('pictures/visit.png');
}
a.visitarrow:hover
{
-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;
display:block;
width:130;
height:121;
background-image:url('pictures/visithover.png');
}
I believe this should work:
a.visitarrow {
display: block;
width: 130;
height: 121;
-webkit-transition: 1.0s ease-in-out;
-moz-transition: 1.0s ease-in-out;
-o-transition: 1.0s ease-in-out;
-ms-transition: 1.0s ease-in-out;
transition: 1.0s ease-in-out;
background-image: url('pictures/visit.png');
}
a.visitarrow:hover {
background-image: url('pictures/visithover.png');
}
Related
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'm trying to have one element exit slowly and another one come in just as slow, but I want the first element to come in fast and the second one to exit fast too. Is this possible? Here's what I tried. This is for a deck.js slide set.
.slide.long.in {
-webkit-transition: -webkit-transform 5000ms ease-in;
transition: transform 5000ms ease-in;
transition: transform 500ms ease-out;
}
.slide.long.out {
-webkit-transition: -webkit-transform 5000ms ease-out;
transition: transform 500ms ease-in;
transition: transform 5000ms ease-out;
}
Deck.js has javascript functions that change the class on a section if it is previous, current, or next. Using Imgonzalves hint, I added the following classes and it seems to work.
> .slide.long.in.deck-current {
-webkit-transition: -webkit-transform 5000ms ease-in;
transition: transform 2500ms ease-in;
}
> .slide.long.in.deck-next {
-webkit-transition: -webkit-transform 500ms ease-out;
transition: transform 500ms ease-out;
}
> .slide.long.in.deck-previous {
-webkit-transition: -webkit-transform 500ms ease-out;
transition: transform 500ms ease-out;
}
> .slide.long.out.deck-current {
-webkit-transition: -webkit-transform 5000ms ease-out;
transition: transform 500ms ease-out;
}
> .slide.long.out.deck-next {
-webkit-transition: -webkit-transform 500ms ease-out;
transition: transform 500ms ease-out;
}
> .slide.long.out.deck-previous {
-webkit-transition: -webkit-transform 500ms ease-out;
transition: transform 5000ms ease-out;
}
I'm using Twitter Bootstrap to build a website, and I want to have an image appear as grayscale until I hover over it, at which point it should become full color.
Instead of editing the Bootstrap.css, I created my own custom css: 'starter-template.css'.
Here's the code in 'starter-template.css':
.thumbnail2 {
-webkit-filter: grayscale(100%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
.thumbnail2:hover {
-webkit-filter: grayscale(0%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
And here's the html:
<!-- Custom styles for this template -->
<link href="static/starter-template.css" type = "text/css" rel="stylesheet">
....
<img class = "thumbnail2" src="{{my_string}}" align="right" height = "200" width = "200">
However, there is no hover effect--the image appears as full color when the page loads and doesn't change when I hover over it. Any suggestions?
Thanks!
Think fixing your z-index is all you need: http://jsfiddle.net/c8wtbjfw/
.thumbnail2 {
-webkit-filter: grayscale(100%);
z-index: -9999999999999999999999999;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
.thumbnail2:hover {
-webkit-filter: grayscale(0%);
z-index: -9999999999999999999999999;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
Seems to work when I test it in Chrome (36.0.1985.143). Since that's a Webkit filter, it won't work in IE or Gecko-based browsers.
An alternative might be to transition the opacity rule, since that has better support. Here's the same CSS, but with opacity instead: http://jsfiddle.net/c8wtbjfw/1/
.thumbnail2 {
opacity: .5;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
.thumbnail2:hover {
opacity:1;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
I did remove your z-index, since I'm not sure what you're trying to accomplish by pushing the image "under" the rest of the page.
Try this:
.thumbnail2 {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE5+ */
-webkit-filter: grayscale(100%); /* Webkit Nightlies & Chrome Canary */
z-index: -9999999999999999999999999;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
.thumbnail2:hover {
filter: none;
-webkit-filter: grayscale(0);
z-index: -9999999999999999999999999;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
I seem to be having trouble with the animation aspect of a hover description. The hover itself works fine and appears exactly where it is placed; however, there seems to be no fade effect when hovering over or away from the element. Instead, the description box appears sharply within the 0.5s listed in the CSS, and disappears the same way. I'm looking to create a smooth, transitioning effect, where the description box fades in and out. Can someone please help me adjust this?
CODE:
#description {
opacity:0;
background:#fff;
z-index:30;
position:fixed;
margin-left:249px;
margin-top:-5px;
border:1px solid #000;
width:230px;
height:299px;
color:{color:text};
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out; }
#description a {
color:{color:text};
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out; }
#sidebar:hover #description {
opacity:0.6;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out; }
Try this...
#description {
opacity:0;
background:#fff;
z-index:30;
position:fixed;
margin-left:249px;
margin-top:-5px;
border:1px solid #000;
width:230px;
height:299px;
color:{color:text};
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
#description a { color:{color:text}; }
#description:hover { opacity:0.6; }
Tried it itself in my code.
Just get rid off opacity and it will work.
See youtiming dot com for demo.
'opacity' is a css property that you need to specify the level value: http://www.w3schools.com/cssref/css3_pr_opacity.asp
Here is a live example on fiddle I just made
This is the HTML Markup
<div class="kid">
<img src="https://cleansites.us/images/katie-kid.jpg" alt="" width="600" height="750" />
<img src="https://cleansites.us/images/katie-adult.jpg" alt="" width="600" height="750" />
</div>
This is the CSS
.kid {
max-width:250px;
position:relative;
}
.kid img {
display:block;
opacity:1;
height: auto;
transition:.6s ease;
width:100%;
position:absolute;
z-index:12;
}
.kid img:hover {
opacity:0;
}
.kid img + img {
display:block;
opacity:1;
position:relative;
z-index:10;
}
Fiddle here: https://jsfiddle.net/cdsaekv9/7/
I have a div with a background image. Using js I switch the class on that div to chaneg the background. I would like a smooth switch - not so abrupt as just switching. I am having difficulties with CSS transitions. Not sure I am using them right in this case. I can do changes with :hover but this doesn't seem to work. As a side note I am using Angular ngClass to switch these classes and I see there is perhaps some use for ngAnimate...
.waiting {
background-image: url("/images/waiting.png");
-webkit-transition: opacity 10s ease-in-out;
-moz-transition: opacity 10s ease-in-out;
-o-transition: opacity 10s ease-in-out;
transition: opacity 10s ease-in-out;
}
.uploading {
background-image: url("/images/uploading.png");
-webkit-transition: opacity 10s ease-in-out;
-moz-transition: opacity 10s ease-in-out;
-o-transition: opacity 10s ease-in-out;
transition: opacity 10s ease-in-out;
}
div{position:relative;}
div:after,
div:before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity: 0;
background-image: url("/images/waiting.png");
-webkit-transition: opacity 10s ease-in-out;
-moz-transition: opacity 10s ease-in-out;
-o-transition: opacity 10s ease-in-out;
transition: opacity 10s ease-in-out;
}
div:before{background-image: url("/images/uploading.png");}
div.waiting:after{opacity:1;}
div.uploading:before{opacity: 1;}
Like this? jsFiddle
div {
width:300px;
height:300px;
}
.waiting, .waiting > span {
background-image: url("http://static3.fjcdn.com/thumbnails/comments/feels+man+_96209287ce84931447c2d1b56fd3ef29.jpg");
-webkit-transition: opacity 200ms linear;
-moz-transition: opacity 200ms linear;
-o-transition: opacity 200ms linear;
-ms-transition: opacity 200ms linear;
transition: opacity 200ms linear;
display:block;
}
.waiting > span {
cursor:pointer;
opacity:0;
width:300px;
height:300px;
background-size:contain;
}
.waiting span:hover {
opacity:1;
background-image: url("http://media.tumblr.com/tumblr_m1wo3uPxfH1qzfo1i.png");
}