$('.click').click(function(){
$('.image').toggleClass("image1");
});
.click{
position:absolute;
top:1%;
left:45%;
cursor:pointer;
}
.image{
cursor: pointer;
position: absolute;
top:25%;
left:0%;
height:60%;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-o-transition: all 3s ease;
-ms-transition: all 3s ease;
transition: all 3s ease;
}
.image1{
cursor: pointer;
position: absolute;
top:25%;
left:50%;
height:50%;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-o-transition: all 3s ease;
-ms-transition: all 3s ease;
transition: all 3s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="click">Click here to animate</div>
<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/c/c4/Winter_baby_10-months-old.jpg">
I've noticed that if there's an image that goes under a transition, it would pixelate during the process until the animation is completed.
how can this be avoided?
You can use image-rendering: pixelated; to image. Hope you are ok with it. Thanks.
$('.click').click(function(){
$('.image').toggleClass("image1");
});
.click{
position:absolute;
top:1%;
left:45%;
cursor:pointer;
}
.image{
cursor: pointer;
position: absolute;
top:25%;
left:0%;
height:60%;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-o-transition: all 3s ease;
-ms-transition: all 3s ease;
transition: all 3s ease;
image-rendering: pixelated;
}
.image1{
cursor: pointer;
position: absolute;
top:25%;
left:50%;
height:50%;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-o-transition: all 3s ease;
-ms-transition: all 3s ease;
transition: all 3s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="click">Click here to animate</div>
<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/c/c4/Winter_baby_10-months-old.jpg">
Related
is lot of time I'm trying to have 3 columns button in bootstrap that change image in Hover.
I have tryed everything but nothing work, all the solution I've found broken the lines of Bootstrap or cause me lot of problem.
Can someone help me to do this? http://s3.postimg.org/j1yibn3pv/Schermata_2015_08_04_alle_11_35_20.png
Please, I'm desperate!
<div class="container">
<div id="box-servizi" class="section-shadow">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" id="promozioni">
<a href="#" title="Scopri tutte le nostre Promozioni">
<img class="section-shadow img-responsive normal" src="img/box-servizi/promozioni.jpg" alt="Immagine Promozioni Lodigiani Concessionaria" title="Scopri tutte le nostre Promozioni!" />
<img class="img-responsive hover" src="img/box-servizi/promozioni-h.jpg" alt="Immagine Mouse Hover Promozioni Lodigiani Concessionaria" title="Scopri tutte le nostre Promozioni!" />
</a>
</div><!-- /promozioni -->
</div><!-- /box-servizi -->
</div><!-- /container -->
<!-- /BOX SERVIZI -->
#box-servizi {
background: #ffffff;
margin: 50px 0px;
padding-bottom: 50px;
padding-top: 20px;
overflow: hidden;
}
#box-servizi>div {
margin-top: 25px;
height: 100px;
position: relative;
padding-right: 50px;
}
#box-servizi>div>a>img{
display: block;
position: absolute;
/* transitions */
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
#box-servizi>div>a>img.normal{
filter: alpha(opacity=100); /* IE stuff */
opacity: 1;
z-index: 2;
}
#box-servizi>div>a>img.hover{
filter: alpha(opacity=0); /* IE stuff */
opacity: 0;
z-index: 1;
}
/* hover */
#box-servizi>div>a:hover>img.normal{
filter: alpha(opacity=0);
opacity: 0;
z-index: 1;
}
#box-servizi>div>a:hover>img.hover{
filter: alpha(opacity=100);
opacity: 1;
z-index: 2;
}
My solution:
/* ==========================================================================
SERVIZI
========================================================================== */
#servizi-bottom {
margin-top: 50px;
margin-bottom: 40px;
}
#servizi-bottom>.container>a>div {
padding: 2.205% 0%;
}
#servizi-bottom h3 {
text-align: center;
text-transform: uppercase;
color: #ffffff;
letter-spacing: 0.1em;
font-style: italic;
}
.servizi-button {
border: 10px solid rgba(0, 0, 0, 0);
}
/* Promozioni
=================================== */
#box-promozioni {
background: transparent url("../img/box-servizi/promozioni.jpg") no-repeat;
background-size:cover;
text-shadow: 1px 1px 10px black;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover #box-promozioni {
background-image: url("../img/box-servizi/promozioni-hover.jpg");
text-shadow: 1px 1px 10px white;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover #box-promozioni h3 {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
/* Servizi
=================================== */
#box-servizi {
background: transparent url("../img/box-servizi/servizi.jpg") no-repeat;
background-size:cover;
text-shadow: 1px 1px 10px black;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover #box-servizi {
background-image: url("../img/box-servizi/servizi-hover.jpg");
text-shadow: 1px 1px 10px white;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover #box-servizi h3 {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
/* Test Drive
=================================== */
#box-testdrive {
background: transparent url("../img/box-servizi/testdrive.jpg") no-repeat;
background-size:cover;
text-shadow: 1px 1px 10px black;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover #box-testdrive {
background-image: url("../img/box-servizi/testdrive-hover.jpg");
text-shadow: 1px 1px 10px white;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover #box-testdrive h3 {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
/* Contatti
=================================== */
#box-contatti {
background: transparent url("../img/box-servizi/contatti.jpg") no-repeat;
background-size:cover;
text-shadow: 1px 1px 10px black;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover #box-contatti {
background-image: url("../img/box-servizi/contatti-hover.jpg");
text-shadow: 1px 1px 10px white;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover #box-contatti h3 {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
/* Tagliando
=================================== */
#box-tagliando {
background: transparent url("../img/box-servizi/tagliando.jpg") no-repeat;
background-size:cover;
text-shadow: 1px 1px 10px black;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover #box-tagliando {
background-image: url("../img/box-servizi/tagliando-hover.jpg");
text-shadow: 1px 1px 10px white;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover #box-tagliando h3 {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
/* Officina
=================================== */
#box-officina {
background: transparent url("../img/box-servizi/officina.jpg") no-repeat;
background-size:cover;
text-shadow: 1px 1px 10px black;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover #box-officina {
background-image: url("../img/box-servizi/officina-hover.jpg");
text-shadow: 1px 1px 10px white;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover #box-officina h3 {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
<!-- !BOX SERVIZI -->
<div class="row" id="servizi-bottom">
<div class="container">
<a href="#" title="Scopri tutte le nostre Promozioni">
<div class="servizi-button col-xs-12 col-sm-6 col-md-4 col-lg-4" id="box-promozioni">
<h3>promozioni</h3>
</div>
</a><!-- /box-promozioni -->
<a href="#" title="Tutto ciò che offriamo">
<div class="servizi-button col-xs-12 col-sm-6 col-md-4 col-lg-4" id="box-servizi">
<h3>servizi</h3>
</div>
</a><!-- /box-servizi -->
<a href="#" title="Tutto sui nostri Test Drive">
<div class="servizi-button col-xs-12 col-sm-6 col-md-4 col-lg-4" id="box-testdrive">
<h3>test drive</h3>
</div>
</a><!-- /box-testdrive -->
<a href="#" title="Scopri come Contattarci!">
<div class="servizi-button col-xs-12 col-sm-6 col-md-4 col-lg-4" id="box-contatti">
<h3>contatti</h3>
</div>
</a><!-- /box-contatti -->
<a href="#" title="Tagliando">
<div class="servizi-button col-xs-12 col-sm-6 col-md-4 col-lg-4" id="box-tagliando">
<h3>tagliando</h3>
</div>
</a><!-- /box-tagliando -->
<a href="#" title="Le nostre Officine">
<div class="servizi-button col-xs-12 col-sm-6 col-md-4 col-lg-4" id="box-officina">
<h3>officina</h3>
</div>
</a><!-- /box-officina -->
</div><!-- /container -->
</div><!-- /row -->
<!-- /BOX SERVIZI -->
What do you think?
I have an issue on chrome or safari browser rendering on Mac. The layout is like this:
<a href="pdf/bus.pdf" class="circle_wrapper">
<span class="business"></span>
<span class="title">BUSINESS SOLUTIONS</span>
<span class="small_title">SEE OUR BROCHURE </span>
<div class="circle_filler"></div>
<img src="images/image_logo.png" alt="">
</a>
and the CSS
.circle_wrapper {margin-right: 40px; float: left; width: 286px; height: 286px; border-radius: 150px; -webkit-border-radius: 150px; -moz-border-radius: 150px; background-color: transparent; position: relative; top:0; left:0; overflow:hidden; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; text-decoration: none;}
.circle_wrapper.last {margin-right:0px;}
.circle_wrapper img {position:absolute; z-index:-2; border:0;}
.circle_filler {width: 600px; height: 600px; transform: rotate(30deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); background-color: rgba(22,147,165,0.63); z-index:-1; position: absolute; top:40px; left:-380px; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s;}
.title {color: #ffffff;position: absolute; left:40px; top: 150px;width: 120px; font: 400 22px "Open Sans"; transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; text-align: center;}
.small_title {color: #ffffff;position: absolute; left:80px; top: 220px;width: 120px; font: 400 15px "Open Sans"; transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; text-align: center; opacity:0;}
.circle_wrapper:hover .small_title {opacity: 1;}
.circle_wrapper:hover .circle_filler{width: 600px; height: 600px; transform: rotate(30deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); background-color: rgba(22,147,165,0.63); z-index:-1; position: absolute; top:40px; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s;left: -150px;}
.circle_wrapper:hover .title {left: 80px;}
you can view it live here -> www.advicity.ro
If you hover over the circles, the blue background doesn't stay hidden. Given that it's such a specific bug, my search is kind of limited and all the answers I found didn't fix it.
Any ideas ? (if you have something that works, an explanation would help for future reference)
Thanks!
Safari is broken when it comes to border-radius trimming :-s
Your fast solution would be to add to
.circle_wrapper{border:60px solid #FFF; margin:-30px;}
Also, change the border-radius from pixels to percentage, If you want circle, the best way to do it is to make border-radius:50%;
And then make the main_wrapper from 950 to 980px; :) And you're done :)
The other more complicated solution is to use masks: More here: https://www.webkit.org/blog/181/css-masks/
I currently have the following CSS, it works in Google Chrome (Webkit), but not in any other browser.
Whats the best way to make this compatible with everything?
As you can see it is using webkit, but I'm not sure what the moz equivalents are.
Many thanks
.card{
margin-top: -50px;
}
.card {
width: 286px; height: 224px;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
-moz-transform-style: preserve-3d;
-moz-transition: 0.5s;
}
.container:hover .card {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.face {
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
.megatron {
float: left; top: 30px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
.megatron .front {
}
.megatron .back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.megatron .back h2 {
background: url(megatron-title.png); text-indent: -9999px;
}
.megatron img {
float: right;
}
Your basic cross browser CSS3 transition declaration:
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
Here is one of my favorite tools to help speed up the process: http://css3generator.com/
Maybe you need:
-webkit-... // For Webkit browser(Chrome, Safari...)
-moz-... // For Mozilla browser
-o-... // For Opera browser
-ms-... // For Microsoft browser
none... // For all browser(Newest version)
Example:
-webkit-transition: 3s ease;
-moz-transition: 3s ease;
-o-transition: 3s ease;
-ms-transition: 3s ease;
transition: 3s ease;
Hope that is useful.
I am trying to get a transition working on some bullets in firefox, but I am having no luck. It works on chrome, safari, opera and ie. Here is my css. I just want the background-image adjusted to my y positioning.
#slideshow-nav a {
display: block;
width: 10px;
height: 10px;
padding: 3px;
background: url('images/bullets.png');
background-position-y: 17px;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
-ms-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
}
#slideshow-nav a:hover {
display: block;
width: 10px;
height: 10px;
padding: 3px;
background: url('images/bullets.png');
background-position-y: 0px;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
-ms-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
}
#slideshow-nav li.activeSlide a {
display: block;
background: url('images/bullets.png');
background-position-y: 0px;
width: 10px;
height: 10px;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
-ms-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
}
To my knowledge (which most certainly is incomplete) background-position-y is not a valid property. My guess is Firefox is not recognizing it. Try:
background-position: 0 17px;
going to
background-position: 0 0;
a.menuhvr { background-image:url('images/bullets.png'); background-repeat:no-repeat; background-position:left; padding-right: 0px; padding-left: 20px; color: #FFFFFF; text-decoration: none; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 14px; font-weight:lighter; text-transform: none; border: 0px; display: block; -webkit-transition: all .5s ease-in-out 0s; -o-transition: all .5s ease-in-out 0s; -moz-transition: all .5s ease-in-out 0s; transition: all .5s ease-in-out 0s; height: 25px; line-height: 25px; }
a.menuhvr:hover { background-image: url(images/bullet1.png); background-repeat:no-repeat; background-color: #104595; background-position: right; margin: 0px; padding-right: 0px; padding-left: 25px; color: #FFFFFF; text-decoration: none; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 14px; font-weight:lighter; background-color: #104595; border: 0px; display: block; height: 25px; line-height: 25px; }
If you wish you can change both different bullet images or can use single
I have two elements in this jsFiddle. Each expands on mouseover with a :hover transition.
I want the blue animation to match the red one. Right now the red one expands over top of the blue one on mouseover, but the blue one expands under the red one. I would like each to animate over top of the other. This could probably be done by changing the z-index on :hover but that didn't seem to work very well.
Since you are animating all properties, the z-index animates and steps from 0 to 1 at the end of the animation.
Just animate the properties that you need and it works:
#a, #b {
width: 100px;
height: 100px;
position: absolute;
top: 0;
-webkit-transition: width .6s ease-in-out;
-moz-transition: width .6s ease-in-out;
-o-transition: width .6s ease-in-out;
-ms-transition: width .6s ease-in-out;
transition: width .6s ease-in-out;
}
http://jsfiddle.net/duopixel/hfM7E/
Try adding this to the CSS (and remove the z-index modifier in #a:hover, #b:hover {...}):
#a {
background: #55a;
left: 0;
z-index: 1;
}
#b:hover {
z-index: 2;
}
Example: http://jsfiddle.net/h6ztv/3/
Try setting initial z-index value to '0'
#a, #b {
width: 100px;
height: 100px;
position: absolute;
top: 0;
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
-o-transition: all .6s ease-in-out;
-ms-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;
z-index:0;
}
#a:hover, #b:hover {
width: 600px;
z-index: 1;
}