I'd like to embed images that are blurred by default using CSS (source image files are not blurred ofc). When the user hovers over an image it should be revealed. It would be awesome if it would have an animation on it as well. Is there any way to do this?
CSS filters (MDN Reference) can do this
img {
-webkit-filter: blur(10px);
filter: blur(10px);
-webkit-transition: -webkit-filter .5s linear;
transition: -webkit-filter .5s linear;
transition: filter .5s linear;
transition: filter .5s linear, -webkit-filter .5s linear;
}
img:hover {
-webkit-filter: blur(0);
filter: blur(0)
}
<img src="http://www.fillmurray.com/460/300" alt="" />
Related
I am trying to apply a green filter effect like the movie The Matrix.
I have made the following filter property combinations in CSS, but still not getting the exact thing.
Could anyone please help me?
Original Image of The Matrix: and the
Green Filter Image of The Matrix: -
Following is the CSS Code
.class-name img {
-webkit-filter: grayscale(100%) sepia(100%) brightness(100%) contrast(140%) saturate(80%) hue-rotate(90deg) opacity(100%);
filter: grayscale(100%) sepia(100%) brightness(100%) contrast(140%) saturate(80%) hue-rotate(90deg) opacity(100%);
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.class-name img:hover {
-webkit-filter: grayscale(0%) sepia(0%) brightness(100%) contrast(100%) saturate(100%) hue-rotate(0deg) opacity(100%);
filter: grayscale(0%) sepia(0%) brightness(100%) contrast(100%) saturate(100%) hue-rotate(0deg) opacity(100%);
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
You can use filter: hue-rotate(300deg); to change the color and give the image a similar effect as the matrix one. Hope it helps!
img {
filter: hue-rotate(300deg);
}
<section>
<img src="https://s3-us-west-2.amazonaws.com/flx-editorial-wordpress/wp-content/uploads/2017/03/17123153/The-Matrix.jpg">
</section>
i am using the opacity of an object on a site to hide it unless hovered, and when hovered it reveals itself.
However for internet explorer this little css trick isnt working. Previously i did not include the
filter:alpha(opacity=0);
CSS tag. but now the CSS reads as follows:
#title-0, #title-1, #title-2, #title-3, #title-4, #title-5, #title-6, #title-7, #title-8
{
-o-transition:all 0.2s linear;
-ms-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-webkit-transition:all 0.2s linear;
transition:all 0.2s linear;
zoom:1;
filter:alpha(opacity=0);
opacity: 0.0;
}
When hovered
#portfolio-0:hover > #title-0, #portfolio-1:hover > #title-1, #portfolio-2:hover > #title-2, #portfolio-3:hover > #title-3, #portfolio-4:hover > #title-4, #portfolio-5:hover > #title-5, #portfolio-6:hover > #title-6, #portfolio-7:hover > #title-7, #portfolio-8:hover > #title-8
{
opacity:1.0;
zoom:1;
filter:alpha(opacity=100);
}
Is there something major im missing?
All help appreciated, this works perfect in all major browsers as far as i've tested except IE
//// * UPDATE * ////
Okay so as per the fantastic answers so far this is what i've altered the "NOT-HOVERED" css to, this should HIDE the title unless the image is hovered.
#title-0, #title-1, #title-2, #title-3, #title-4, #title-5, #title-6, #title-7, #title-8
{
-o-transition:all 0.2s linear;
-ms-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-webkit-transition:all 0.2s linear;
transition:all 0.2s linear;
zoom:1;
filter:alpha(opacity=0);
opacity: 0.1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
<!--[if IE]>
opacity: 0.01;
<![endif]-->
}
But the object im trying to hide is still shown :/
What version of IE are you trying to cater for?
http://css-tricks.com/snippets/css/cross-browser-opacity/
This website should provide you with the answer, have a look at the line:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
Obviously change the opacity value to be (Opacity=100) on hover
Also in your hover you have
filter:alpha(opacity=0);
it should be
filter:alpha(opacity=100);
I'm using ccs3 to fade in an image on hover. I'd like that same image that fades in on hover to rotate. I seem to be missing something.
Here is a jsfiddle. http://jsfiddle.net/5ftZ7/
<div id="cf">
<img class="bottom" alt="" src="http://s513195336.onlinehome.us/wp-content/uploads/2014/02/pin-over.png" /> <img class="top" alt="" src="http://s513195336.onlinehome.us/wp-content/uploads/2014/02/pin.png" />
</div>
#cf {
position:relative;
margin:30px auto;
width:200px;
height:200px;
}
#cf img {
margin-top:30px;
position:absolute;
left:0;
top:0;
-webkit-transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-o-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
-webkit-transition: -webkit-transform 0.2s ease-in;
}
#cf img.top:hover {
opacity:0;
position:absolute;
left:0;
top:0;
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg);
}
There are a variety of issues that culminate in this not working the way you want:
Understanding of transition rules
CSS properties cannot accumulate. There is nothing special about the transition rule:
transition: opacity .2s ease-in-out;
transition: transform .2s ease-in-out;
The second declaration overrides the first. This would be no different than:
color: red;
color: blue;
being blue. You can use multiple comma-separated transition definitions, or use the special all property:
transition-property: opacity, transform;
transition-duration: .2s;
transition-timing-function: ease-in-out;
/* or */
transition: opacity .2s ease-in-out, transform .2s ease-in-out;
/* or, but this may affect properties you do not want */
transition: all .2s ease-in-out
:hover with stacked elements.
.top is on top of .bottom, so .bottom cannot be hovered even when .top is transparent. This prevents rules that you would want to apply to .bottom from being applied. The simplest solution to this is just to check for :hover on #cf instead, as in #cf:hover img.top as the selector.
transform missing from .bottom
.bottom also needs the transform rules when it is hovered so it can rotate in sync with .top.
Here is a working example using only -webkit and increasing the transition durations for effect.
http://jsfiddle.net/ExplosionPIlls/5ftZ7/1/
I guess what you are trying to achieve is this:
Fiddle: http://jsfiddle.net/marionebl/5ftZ7/2/.
Includes -webkit- only for brevity. What this does:
Uses the former .bottom as first layer in stack
Replaces .bottom with a html element mimicking the image in your fiddle. Could be a png with transparency, too.
Listen for :hover state on #cf instead of .bottom or .top
Fade the former .bottom in, rotate the former .top
you can't use several transitions on an element,
if you want to apply transition to several properties you can use "all"
transition: all 1s;
or comma separated transition:
transition: opacity 1s, transform 0.8s;
#keyframes rotation {
0% {
transform: rotate(0deg);
opacity: 0;
}
100% {
transform: rotate(359deg);
opacity: 1;
}
}
I have an element which does not have a background image when the app is loaded. Then when a button is clicked, a CSS class gets added to the element which sets the background-image for that element for a few seconds. Problem is - I can't get the background image to fade-in and fade-out.
What I tried:
.MyBox.formElementInput {
background-repeat: no-repeat;
background-position: 65px center;
background-size: "contain";
-webkit-transition:background-image 2s ease-in-out;
-moz-transition: background-image 2s ease-in-out;
-o-transition: background-image 2s ease-in-out;
transition: background-image 2s ease-in-out;
}
.MyBox.formElementInput.showSpinner {
background-image : url("/PmDojo/dojox/widget/Standby/images/loading.gif");
}
EDIT: JQuery is not an option.
CSS doesn't fade or animate background images without a javascript plugin. If you want an only CSS option, you need to wrap it in a div, and fade in/out the whole div.
If you don't mind the content of the div fading in/out as well:
#div-with-bg{
-webkit-transition: opacity 1.5s linear;
-moz-transition: opacity 1.5s linear;
transition: opacity 1.5s linear;
background: url(background.png);
opacity: 0;
}
#div-with-bg:hover{
opacity: 1;
}
I'm trying to make a transition effect with background-color when hovering menu items, but it does not work. Here is my CSS code:
#content #nav a:hover {
color: black;
background-color: #AD310B;
/* Firefox */
-moz-transition: all 1s ease-in;
/* WebKit */
-webkit-transition: all 1s ease-in;
/* Opera */
-o-transition: all 1s ease-in;
/* Standard */
transition: all 1s ease-in;
}
The #nav div is a menu ul list of items.
As far as I know, transitions currently work in Safari, Chrome, Firefox, Opera and Internet Explorer 10+.
This should produce a fade effect for you in these browsers:
a {
background-color: #FF0;
}
a:hover {
background-color: #AD310B;
-webkit-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
<a>Navigation Link</a>
Note: As pointed out by Gerald in the comments, if you put the transition on the a, instead of on a:hover it will fade back to the original color when your mouse moves away from the link.
This might come in handy, too: CSS Fundamentals: CSS 3 Transitions
ps.
As #gak comment below
You can also put in the transitions into content #nav a for fading back to the original when the user moves the mouse away from the link
To me, it is better to put the transition codes with the original/minimum selectors than with the :hover or any other additional selectors:
#content #nav a {
background-color: #FF0;
-webkit-transition: background-color 1000ms linear;
-moz-transition: background-color 1000ms linear;
-o-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
#content #nav a:hover {
background-color: #AD310B;
}
<div id="content">
<div id="nav">
Link 1
</div>
</div>
Another way of accomplishing this is using animation which provides more control.
/* declaring the states of the animation to transition through */
/* optionally add other properties that will change here, or new states (50% etc) */
#keyframes onHoverAnimation {
0% {
background-color: #FF0;
}
100% {
background-color: #AD310B;
}
}
#content #nav a {
background-color: #FF0;
/* only animation-duration here is required, rest are optional (also animation-name but it will be set on hover)*/
animation-duration: 1s; /* same as transition duration */
animation-timing-function: linear; /* kind of same as transition timing */
animation-delay: 0ms; /* same as transition delay */
animation-iteration-count: 1; /* set to 2 to make it run twice, or Infinite to run forever!*/
animation-direction: normal; /* can be set to "alternate" to run animation, then run it backwards.*/
animation-fill-mode: none; /* can be used to retain keyframe styling after animation, with "forwards" */
animation-play-state: running; /* can be set dynamically to pause mid animation*/
}
#content #nav a:hover {
/* animation wont run unless the element is given the name of the animation. This is set on hover */
animation-name: onHoverAnimation;
}
You can simply set transition to a tag styles and change background in hover
a {
background-color: #FF0;
transition: background-color 300ms linear;
-webkit-transition: background-color 300ms linear;
-ms-transition: background-color 300ms linear;
-o-transition: background-color 300ms linear;
-ms-transition: background-color 300ms linear;
}
a:hover {
background-color: #AD310B;
}
<a>Link</a>