I'm in the middle of making a site that will showcase my graphic work. For one of the thumbnails of my work i've got it to do this
.example1:not:hover {
opacity:1;
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
transform:rotate(-7deg);
-ms-transform:rotate(-7deg);
-webkit-transform:rotate(-7deg);
transition: transform 0.25s linear;
}
now, i want it to do
transform:rotate(7deg);
-ms-transform:rotate(7deg);
-webkit-transform:rotate(7deg);
when you take your mouse of the thumbnail
The html of the thumbnail is
<div id ="maintext">
<img src="Images/example.png" class="example1" >
</div>
thanks all.
No there is no explicit property for mouse leave in CSS. Now I understood what you want.
jQuery
$('.example1').on('mouseleave', function () {
var $this = $(this);
$this.removeClass('mouseenter');
$this.addClass('mouseleave');
window.setTimeout(function () {
$this.removeClass('mouseleave');
}, 150);
}).on('mouseenter', function () {
$(this).addClass('mouseenter');
});
CSS
.example1 {
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
transition: transform .15s linear;
transform:rotate(0deg);
-ms-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
}
.example1.mouseenter {
transform:rotate(7deg);
-ms-transform:rotate(7deg);
-webkit-transform:rotate(7deg);
}
.example1.mouseleave {
transform:rotate(-7deg);
-ms-transform:rotate(-7deg);
-webkit-transform:rotate(-7deg);
}
Live Example:
JS Fiddle
First of all, you can't use the :not selector like that.
If you want to specify something that is not hovered, you don't need any pseudoclass. I think you want something like this:
.example1 {
/* no rotation */
}
.example1:hover {
transform:rotate(7deg);
-ms-transform:rotate(7deg);
-webkit-transform:rotate(7deg);
}
Then, if you want a different state after it has been hovered, you'll need to add a class with javascript:
$(document).on("mouseleave", ".example1", function() {
$(this).addClass("hovered");
});
Now you can have a CSS class like this:
.example1.hovered {
transform:rotate(-7deg);
-ms-transform:rotate(-7deg);
-webkit-transform:rotate(-7deg);
}
Put what you want for the non-hover state in just .example1 { ... }. Then put the hover state in .example1:hover { ... }. So, if you want to make images rotated when not hovering, do it like this:
.example1 {
opacity:1;
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
transform:rotate(-7deg);
-ms-transform:rotate(-7deg);
-webkit-transform:rotate(-7deg);
transition: transform 0.25s linear;
}
.example1:hover {
/* set all transforms to none or whatever you want when hovering */
}
Related
I've got two classes, fade-item and fade. fade is nested in fade-item like this:
<a class="product-item fade-item" (mousemove)="hoverOn(i)" (mouseleave)="hoverOff(i) >
<div class='fade' *ngIf='item.active' >
<button class="botonete botonete--primary botonete--hero-one">
Button Text
</button>
</div>
</a>
When I hover over fade-item with mousemove, a value is set on the item so it shows using *ngIf='item.active', but it is supposed to do an opacity transition, which is not happening.
css code below:
.fade {
opacity: 0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
.fade-item:hover {
.fade{
opacity: 1;
}
}
Anyone knows what I am doing wrong?
The code you wrote it's scss. If you are looking for a css answer it should be like this:
.fade {
opacity: 0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
.fade-item:hover .fade{
opacity: 1;
}
When an element is dynamically added to the page, its styles are computed at that moment. For your transition to work, you would need it to have been already computed despite not actually existing yet.
Minimal example of it not working:
const elem = document.getElementById('hoverme');
elem.addEventListener('pointerover',e=>{
elem.insertAdjacentHTML('beforeend','<span id="fade">Dynamically added!</span>');
});
elem.addEventListener('pointerout',e=>{
elem.children[0].remove();
});
#fade {
opacity: 0;
transition: opacity 1s;
}
#hoverme:hover #fade {
opacity: 1;
}
<div id="hoverme">Hover me!</div>
Instead, you need to give it an animation that will begin when the element is added to the document.
Example:
const elem = document.getElementById('hoverme');
elem.addEventListener('pointerover',e=>{
elem.insertAdjacentHTML('beforeend','<span id="fade">Dynamically added!</span>');
});
elem.addEventListener('pointerout',e=>{
elem.children[0].remove();
});
#fade {
animation: fade-in 1s both;
}
#keyframes fade-in {
from {opacity:0}
to {opacity:1}
}
<div id="hoverme">Hover me!</div>
I'm using an angular js button, but i cant seem to use conventional css&js methods to put animations on it..i'm trying to implement an opacity animation on the button.
can anyone please help?
HTML
<span id="sign_btn">
<md-button>Button</md-button>
</span>
CSS:
#sign_btn{
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity .2s ease-in-out;
-ms-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
display:none;
opacity:0;
}
JS:
$("#sign_btn").css('display', 'block');
$("#sign_btn").css('opacity', '1');
You should use animation instead of transition.
First, create a custom animation
#-webkit-keyframes opanimation {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes opanimation {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-o-keyframes opanimation {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#keyframes opanimation {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
Then apply it to you element
#sign_btn {
animation: opanimation 5s; //you can modify the seconds here
}
Check this fiddle https://jsfiddle.net/2up5y71k/
Transitions only work for changes from one visible state to another. Your button is initially display:none; so the opacity change is not considered as a change in opacity from one state to another. Remove it (use other techniques like positioning, z-index, translate etc to achieve similar effect) and the transition should work.
found out the solution..
$("#sign_btn").delay(0).animate({"opacity": "1"}, 200);
I am trying to set the transition for the portfolio section of my web, I need the effects on hover for portfolio thumbs and i have the following codes in CSS:
.proimg img {
height: 100%;
max-width: 100%;
}
.proimg img:hover {
opacity: 0.5;
filter: alpha(opacity=50);
transition: all 0.55s ease-in-out;
}
That's the portfolio page http://goo.gl/Gaja7v
On hover, images didn't look good. Transition works but it messed up the thumbs, doesn't look good. I would like to make the transition to similar as this website http://goo.gl/0hb56Z
Anyone can help?
First of all, you have to resize list images for that!
--
I recommend jQuery, fadeTo function
//you have to include jquery lib
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
//HTML :
<img src="http://pjvarquitetura.com.br/wp-content/uploads/casad.jpg">
//Javascript :
<script>
$('img').mouseenter(function() {
$(this).fadeTo('fast', 0.7);
}).mouseleave(function(){
$(this).fadeTo('fast', 1);
});
</script>
you can get more information about fade to function
- http://www.w3schools.com/jquery/eff_fadeto.asp
If you don't want to use fadeTo function.
//CSS
.fadeeffect {
-webkit-transition: opacity 250ms ease-in-out;
-moz-transition: opacity 250ms ease-in-out;
-o-transition: opacity 250ms ease-in-out;
transition: opacity 250ms ease-in-out;
}
//Javascript
$(document).ready(function() {
$('img').mouseenter(function() {
$(this).css('opacity', 0.7);
}).mouseleave(function(){
$(this).css('opacity', 1);
});
});
//HTML
<img class="fadeeffect" id="a" src="http://pjvarquitetura.com.br/wp-content/uploads/casad.jpg">
It's easy to think of the transition property as an "action": eg, "When this :hover state begins, transition the given properties." But you really need to think of it as a constant state, which means "when the following properties change, for any reason, transition them in this manner."
So you really want the transition property to be on your first CSS rule, so that it always applies. Otherwise, the transition is only when the mouse starts to hover, not when it leaves.
You need to set the transition property to your img as well:
.proimg img {
height: 100%;
max-width: 100%;
transition: all 0.55s ease-in-out; /* this line */
}
.proimg img:hover {
opacity: 0.5;
filter: alpha(opacity=50);
transition: all 0.55s ease-in-out;
}
http://codepen.io/anon/pen/ZbPKVR
This is explained by Katana314's answer.
Using this css code
#onec-fourth:hover {
background-color: #F36DE1;
color: white;
}
I want that when I move the mouse off the object (#onec-fourth),
for the background color & the color text will persist for 1 second.
Because right now, when I move my mouse off it is stopped.
How do I make the :hover effect persist a short duration?
This kind of task can be easily realized with a simple CSS transition, no Javascript is needed (unless you need to support older browsers, but the basic effect will work anyway):
Example: http://codepen.io/anon/pen/nzLkf (tested on Firefox29 and Chrome35)
CSS code
#onec-fourth {
width: 300px;
height: 300px;
border: 2px dashed #ddd;
-webkit-transition: all 0s linear 1s;
-moz-transition: all 0s linear 1s;
-ms-transition: all 0s linear 1s;
transition: all 0s linear 1s;
}
#onec-fourth:hover{
background-color:#F36DE1;
color:white;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}
For a fade-out effect (after 1 second) see instead http://codepen.io/anon/pen/AkCcm
(use transition: all 1s linear 1s and transition: all 0s linear 0s on :hover):
just play with with transition-duration and transition-delay values as you prefer, until you achieve the optimal result.
Further information on CSS transitions can be found on MDN
As a simple demonstration of the technique that might help you:
#onec-fourth {
background-color: #fff;
/* vendor prefixes stripped for brevity;
sets the transition for the background-color property: */
transition: background-color 1s linear;
transition-delay: 1s; /* delays that transition for 1 second */
}
#onec-fourth:hover {
background-color: #ffa;
}
JS Fiddle demo.
References:
CSS transitions.
transition-delay.
if you want to apply more styles than just one you may use addClass/removeClass:
<style>
.hov {
background-color:#F36DE1;
color:white;
}
</style>
and jquery code:
<script>
$(document).ready(function () {
$("#onec-fourth").mouseenter(function () {
$("#onec-fourth").addClass("hov");
});
$("#onec-fourth").mouseleave(function () {
setTimeout(function () {
$("#onec-fourth").removeClass("hov");
}, 1000);
});
});
</script>
http://jsfiddle.net/6zSJa/8/
Demo Fiddle
var self;
$('#onec-fourth').mouseover(function(){
self = $(this);
self.css('background-color','red');
}).mouseleave(function(){
setTimeout(function(){
self.css('background-color','blue');
},1000);
});
Using jQuery setTimeout() , mouseover() and mouseleave(). Check the links for more details.
I am using sprite image links for some of my menu items , positioning with background-position. I would like to make a fade effect in and out of the hover. I set up a
Demo http://jsfiddle.net/6q2hH/
<li class="mobileimg"></li>
li.mobileimg .mobileimage{
display:block;
background:transparent url('http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png')no-repeat;
width: 30px;
height:30px;
margin-top:9px;
margin-left:3px;
}
li.mobileimg .mobileimage:hover {background-position:0px -29px;}
First, you need to set the opacity of .mobileimage:hover to something less than 1. For cross-browser compatibility, try:
.mobileimage:hover {
filter: alpha(opacity=50);
-khtml-opacity: .5;
-ms-filter: "alpha(opacity=50)";
-moz-opacity: .5;
opacity: .5;
}
Then, to create an actual transition effect, you need to tell .mobileimage to create a transition on opacity instead of just switching to opacity: .5 immediately:
.mobileimage {
-webkit-transition: opacity 500ms ease;/* Saf3.2+, Chrome */
-moz-transition: opacity 500ms ease; /* FF4+ */
-ms-transition: opacity 500ms ease; /* IE10? */
-o-transition: opacity 500ms ease; /* Opera 10.5+ */
transition: opacity 500ms ease;
}
500ms is how long it takes for the opacity to change, and ease is the type of transition effect. See the updated fiddle.
Something like this? http://jsfiddle.net/6q2hH/3/
li.mobileimg .mobileimage{
display:block;
background:transparent url('http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png')no-repeat;
width: 30px;
height:30px;
margin-top:9px;
margin-left:3px;
}
li.mobileimg .mobileimage:hover {
background-position:0px -29px;
-webkit-animation-name: fadingItOut;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
}
#-webkit-keyframes fadingItOut {
0% {
opacity: 1.0;
}
100% {
opacity: 0.0;
}
}
}
You can tweak the behavior based on your needs. Check Mozilla MDN for more info.
Also remember that this is only a WebKit example for Safari/Chrome/Chromium/etc. Other prefixes are (all animation tags need a prefix, this is only one example);
animation-name // Vanilla (general CSS)
-moz-animation-name // Firefox
-o-animation-name // Opera
-ms-animation-name // Internet Explorer
And for the frames;
#keyframes fadingItOut {
#-moz-keyframes fadingItOut {
#-o-keyframes fadingItOut {
#-ms-keyframes fadingItOut {