-
1. Re: Multiple CSS transitions... is it possible?
Jon Fritz II Apr 24, 2013 6:58 AM (in response to matthew stuart)You can make cross-fade image transitions with css, but not within the background-image attribute itself. The background-image is working as expected from your description. Since there are no settings between background-image:url(../images/bg-moreinfo.png); and "no background-image attribute" you are seeing what is supposed to happen.
Restructuring your page to use two overlapping divs with different images and opacity settings that change on :hover would be the way to go in my opinion.
Here's a basic cross-fade I've used in the past, just swap out the images with yours and see if that's the basic effect you're looking for. You should be able to modify the css to do the rest of what you want if it is...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin:0;
}
#wrapper {
width:950px;
margin:auto;
}
.fade {
width:300px;
height:300px;
overflow:hidden;
margin-right:10px;
margin-bottom:10px;
float:left;
}
div.off {
opacity:0;
z-index:1;
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
}
div.on {
z-index:2;
position:relative;
top:-300px;
opacity:1;
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
}
.fade:hover div.off {
opacity:1;
z-index:2;
}
.fade:hover div.on {
opacity:0;
z-index:1;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="fade">
<div class="off"><img src="images/viewable_on_hover.jpg" alt="#" width="300" height="300" /></div>
<div class="on"><img src="images/viewable_when_page_loads.jpg" alt="#" width="300" height="300" /></div>
</div>
</div>
</body>
</html>
EDIT: With this one, you can add a link around the image in the <div class="on"> so the cross-fade can be a clickable button
-
2. Re: Multiple CSS transitions... is it possible?
Rik Ramsay Apr 24, 2013 11:33 AM (in response to matthew stuart)It might seem like two transitions, but really it's only one - you are fading up the background image and color.
Try the below and see if it helps - I have used this a few times on different items. I modified it from my code to fit yours so it might need some tweaking. In basic terms, the background color and image is on the main link with a zero opacity and you then fade it up to a full opacity. I added the 'position:relative' to the hover state to fix your shadow problem but this hasn't been tested.
a .comingeventwrap {
padding: 15px 10px 15px 0;
border-bottom: 1px solid #ebebeb;
background:#FFF url(../images/bg-moreinfo.png) no-repeat bottom right;
opacity:0;
-webkit-transition: background .4s ease-in-out;
-o-transition: background .4s ease-in-out;
-moz-transition: background .4s ease-in-out;
-ms-transition: background .4s ease-in-out;
transition: background .4s ease-in-out;
}
a:hover .comingeventwrap {
opacity:1.0;
background:#999 url(../images/bg-moreinfo.png) no-repeat bottom right;
-webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, .3);
position:relative;
}
EDIT:// Having just realised that you have a bunch of text and divs inside that <a> tag, this solution will probably not work as it will fade ALL content. As such, you could lay one div over the other and attach the above to the lower div.
EDIT EDIT:// I modifed the above. You could invert what you have and have it done through CSS. Make the text image WHITE instead of dark and then make the backgriund overlay that little darker than you have now. The background will seem as though its fading up but really you are just making it visible.




