Adding CSS ease-in and ease-out transition for changing images - html

I am trying to add a simple ease-in and ease-out effect when you hover over a logo. I know there are posts about this. I've tried many different combinations of CSS, but can't seem to get it to work.
I've successfully changed the logo color by changing the content upon hover with this CSS code:
#dealertrackr-image.et_pb_image:hover {
content: url('image url');
}
When it is hovered over, the logo changes from the black and white state to colored state. I now want this to have a 1s ease-in and ease-out on hover and release of hover. Nothing that I tried worked.
http://www.nationalgalactic.com/divisions/

If all you were hoping for was grayscale, you may also be interested in just loading in the full color image and using a CSS filter to desaturate / resaturate on hover.
This combined with CSS transitions will create a nice little fade:
img {
-webkit-filter: grayscale(100%);
filter: gray; filter: grayscale(100%);
filter: url(desaturate.svg#greyscale);
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
transition: all .25s ease;
}
img:hover {
-webkit-filter: grayscale(0%);
filter: none;
}
*edit
This is a pure CSS solution, but is not fully supported in Android Jellybean, and Internet Explorer. If full browser support is important to you, please see isherwood's answer on this same post. For full support, your solutions are limited to stacked images or javascript.

The only way to do it with images is to stack elements and transition the opacity of the top layer. Browsers don't do image-to-image transitions.
Something like this, where the anchor has a background image:
a {
display: inline-block;
background: url(http://lorempixel.com/400/150/nature) left top no-repeat;
}
a img {
transition: opacity 1s;
}
a:hover img {
opacity: 0;
}
<a href="#">
<img src="http://lorempixel.com/400/150/nature/2" alt="">
</a>
Here's a demo with your code and images.

Related

Fade In Image On Load Via CSS

I am working on a web app. When a user visits the landing page, I want to fade-in an image. That image is the background for some text. When the image has successfully loaded, I then want to move the text in from the top. Currently, I have the following:
<html>
<head>
<title></title>
<style type="text/css">
.banner {
background-image: url('/public/img/bg.png');
background-size: cover
}
#keyframes fadeIn { from { opacity:0; } to { opacity:1; }}
.fade-in {
opacity:0;
animation:fadeIn ease-in 1;
animation-fill-mode:forwards;
animation-duration:0.2s;
}
#keyframes translateY { from { y:0px; } to { y:100px; } }
.translate-y {
animation:translateY ease-in 1;
animation-duration:0.1s;
animation-fill-mode:forwards;
}
</style>
</head>
<body>
<div class="banner fade-in">
<h1 class="translate-y">Welcome</h1>
</div>
</body>
</html>
There are several problems with this approach:
The animation starts whether the background-image is loaded or not.
The "Welcome" text starts animating before the background-image is loaded.
I'm not sure how to fix this. The first item is especially frustrating. I can't use jQuery, so I'm stuff with CSS. The second item, I could use an offset. However, once again, if the image isn't cached, nothing runs properly.
Place your image in the background with an <img ...> tag, (not with CSS background-image: ... attribute).
You can set the initial opacity to 0, and when the image onloaded, set the opacity to 1. With CSS you can make a transition between the two states:
<style>
.easeload{
opacity: 0;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
}
</style>
<img class="easeload" onload="this.style.opacity=1" src="https://dummyimage.com/320x240">
I have seen this problem before, there is a solution I have used myself from this css-tricks article, but just in case the link does go dead here is the solution: You need to add a class/id to your body to ensure that everything transitions/animations and anything you need CSS runs after the body loads. The below is an example of what you can achieve, keep in mind you can add anything else you need under the #preload id.
CSS
#preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}
HTML
<body id="preload">
JS
// trigger right as the document loads
document.getElementById("preload").className = "";
Give it a try and let us know if this worked for you.
You can use animation-delay and add it to the elements.It should solve your problems :
animation-delay: 2s;

Adding opacity hover effect to thumbnail with fancybox effect

I'm attempting to add a opacity hover-over effect with small text to a thumbnail with a fancybox effect. I don't know much jquery so a css method would be preferable.
I found another forum that says to add a class of fade to my img element with the css of:
.fade {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;}
.fade:hover {
opacity: 0.5;}
But that had no effect. Any ideas?
Your css is correct. If it is not working for you, you either did not apply the classname fade to your image(s), or you have a browser that does not support the opacity css property.
As #MaryMelody posted in a comment, this JSFiddle has your code with the class applied to a div (the class can be applied to any element to make it fade on hover).

CSS custom button slide transition?

Alright Google isn't helping me out much here.
The aim of the game is to have a button, which is a custom png, and upon mouse rollover it 'slides upwards', remaining in the same spot but transitioning to the rollover by means of sliding.
Preferably I'd like to get this sorted using CSS3, the page already has a bit of an OTT fest of JQuery.
Currently I've only managed to get it to slide from the left side. Downwards is fine too.
Code is about as simple as it comes, the HTML looks like this (Just a basic DIV):
<div id="Abutton"><a draggable="false" title="A button n' stuff"></a></div>
The CSS:
#Abutton a {
background: url(mediafolder/Abutton.png) no-repeat 0% 0px;
display: block;
height: 32px;
width: 86px;
cursor: pointer;
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
-webkit-transition: background .25s ease-in-out;
}
#Abutton a:hover {
background-position: -86px 0%;
}
(Plus a further # for the positioning and size etc..)
If it makes for any complications the button is also tied to a JQuery file that upon clicking, smooth scrolls to a different point in the page (Props to the awesome chap that helped me out with that last night!).
Thanks in advance!
I think what you're asking is a slot machine display type feel?
Just use an image sprite, which you pretty much already are trying to do, and put a css animation on it, and it will look what you want (which i think is what you want?) Best of luck
.animate {
-webkit-transition: all 0.250s -in-out;
-moz-transition: all 0.250s ease-in-out;
-o-transition: all 0.250s ease-in-out;
transition: all 0.250s ease-in-out;
}

a:hover (with an id)background image transition not working in firefox and ie

i have some logos which transition on hover but i've always tested with chrome(yeah i messed up)So I just tested it in ff & ie and it's not working (i have the latest versions)
Here is my fiddle http://jsfiddle.net/r6qZw/
and here is the html
<a id="facebook" href="http://facebook.com"></a>
and the css
#facebook {
float: left;
height: 40px;
width: 40px;
background-image: url(http://i.imgur.com/2lAKpSi.jpg);
background-repeat: no-repeat;
background-position: center center;
-o-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-khtml-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
#facebook:hover {
background-image: url(http://i.imgur.com/L7Jmol5.jpg);
}
I know the solution to this is simple but i just couldn't do it. When i remove the background image and just use a color instead, it works but using background image just stops the animation. I still get the second image but it doesn't transition with an animation. I've also tried giving a parent element (like the famous "ul li a" and such)
Can someone help a noob out?
background-image is not a transitionable property (except for gradients, and that's not supported in Chrome - IE supports it though!)
The fact that Chrome can transition the image for you is simply an extension of the standard. This is evidenced by how horrible it looks if you rapidly move your mouse over and off of it repeatedly - normal transitions are smooth in spite of this, but the image "transition" is horrible.

CSS hover effect not triggering on text

Here's a jsfiddle of the project I'm working on
http://jsfiddle.net/bhbLa/
I have a picture that is set to grayscale using some CSS, with some text positioned over the image. When the image is hovered over, it turns the grayscale off and hides the text. It's almost exactly what I want.
The problem I'm having is that if you scroll over the very center of the image where the opacity:0; text is, it isn't considered as hovering over the image, which turns the image back to grayscale.
I've racked my brain all day for this, and I don't know why
div.text:hover #cell {
opacity:1;
}
doesn't correct this problem.
If I am understanding correctly, you need to target the hover effect on the image's parent and not the image itself.
What your old selector was doing was only targeting the hover effect if the cursor is over the image. Well when you are hovering over the text, which is a block level element, you are actually no longer hovering over the img element and therefor will lose it's hover effect.
Here is the css I changed:
div.cell:hover img {
filter: none;
-webkit-filter: grayscale(0);
transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-webkit-transition: opacity .2s ease-in-out;
opacity:1.0;
}
Finally, a fiddle: Demo