I have logo in my website, it is grayscaled on hover i want it to be colored smoothly. it is working but not smoothly. i am using CSS transition.
This is my code
<img alt="TT ltd logo" src="./img/tt-logo.png" class="tt-logo" />
<style>
img.tt-logo {
filter: grayscale(1);
transition: grayscale 0.5s;
}
img.tt-logo:hover {
filter: grayscale(0);
}
</style>
Try do it this way:
img.tt-logo {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
transition: all 0.5s ease;
}
img.tt-logo:hover {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
filter: grayscale(0%);
}
and every image has its own alt, you can use it without using img.class:
img[alt="TT ltd logo"] {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
transition: all 0.5s ease;
}
img[alt="TT ltd logo"]:hover {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
filter: grayscale(0%);
}
in this case class is extra
Animating a filter takes a lot of computation and might hurt performance in some browsers.
You can get better performance by animating the opacity of a grayscale image to reveal a full-color image beneath it.
Here's an example.
With the current state of browsers, you could go for the example below, short and simple.
Modern browsers nowadays support the grayscale CSS attribute and if you're only transitioning one attribute, best reference one attribute instead of all attributes.
img {
grayscale: 1;
transition: filter .23s ease-in-out;
}
img:hover {
grayscale: 0;
}
Sources:
Animatable CSS properties
grayscale attribute
Timings on transitions
Related
I'm trying to add a blur effect to the backdrop of a dialog (I realise dialog currently only has limited support - I'm using Chrome v66).
I've tried adding a blur filter to the ::backdrop css (no luck), and the backdrop-filter isn't supported yet.
Anyone know what I should be doing instead?
window.onload = function() {
document.getElementById('mydialog').showModal();
}
dialog::backdrop {
background: rgba(255, 0, 0, .25);
}
/* attempt #1 - using a blur filter */
dialog::backdrop {
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);
}
/* attempt #2 - using backdrop-filter */
dialog::backdrop {
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
/* attempt #3 - using an svg */
dialog::backdrop {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><defs><filter id='blur'><feGaussianBlur stdDeviation='5' /></filter></defs><rect filter='url(%23blur)' fill='rgba(255,255,255,0.5)' x='0' y='0' width='100%' height='100%'/></svg>");
}
Here is some other text that I want blurred.
<dialog id="mydialog">This is the dialog window</dialog>
Use backdrop-filter:
dialog::backdrop {
backdrop-filter: blur(1px);
}
So not an ideal solution (I'd prefer to use css only), but this is an example workaround using javascript to apply a .blur class to the body.
window.onload = function(){
document.getElementById('mydialog').showModal();
document.getElementsByTagName('body')[0].classList.add("blur")
}
dialog::backdrop {
background: rgba(255,0,0,.25);
}
.blur {
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);
}
Here is some other text that I want blurred.
<dialog id="mydialog">This is the dialog window</dialog>
I understand this animation should work on SVGs as it does on HTML elements but obviously I am wrong!
How do I achieve this effect with CSS on an SVG? Fiddle here.
div {
background: blue;
width: 400px;
height: 100px;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#keyframes example {
0% {
filter: brightness(1);
filter: contrast(1);
-webkit-filter: brightness(1);
-webkit-filter: contrast(1);
}
50% {
filter: brightness(0.1);
filter: contrast(0.1);
-webkit-filter: brightness(0.1);
-webkit-filter: contrast(0.1);
}
100% {
filter: brightness(1);
filter: contrast(1);
-webkit-filter: brightness(1);
-webkit-filter: contrast(1);
}
}
Change the div from css to svg . It works for me.
Or if you want to see both the div and svg, just add div, svg { css code..}
Example: http://jsfiddle.net/4ebv7jzd/1/
I'm creating a modal pop-up that alerts the user, and overlays on the page.
I'm trying to make it so that the background is blurred (thus content on page is obscured) but the modal-pop-up is clear.
Here is an example, the modal fades in after several seconds. I have applied filter: blur to the .modal-newsletter-wrap which is the wrapper that sits full across the page. My intention was that the text and the cat image on the page would be blurred, but they are still crisp: http://codepen.io/anon/pen/Ggzxdz
Also, despite having filter: blur(0); set on the inner div .modal-newsletter it's still inheriting the blur of the wrapper div.
.modal-newsletter-wrap {
background-color:rgba(243,243,232,0.5);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
.modal-newsletter{
-webkit-filter: blur(0);
-moz-filter: blur(0);
-o-filter: blur(0);
-ms-filter: blur(0);
filter: blur(0);
}
.modal-newsletter is child of .modal-newsletter-wrap, so if you set blur filter on .modal-newsletter-wrap it will of-course apply to .modal-newsletter, no matter if you set blur(0) on child element .modal-newsletter.
you can set the blur on<p><p>, which now contains your page body(including cat and all stuff), so the blur is not carried to the modal popup.
See this codepen, you will need to set the style for blur on your content, using javascript when the modal opens.
Another solution would be to put an overlay on the page , which is not realted to (not parent of) .modal-newsletter-wrap, and add blur to it. Like this
wrap all the contents except the overlay in a common parent element (e.g a <main> element) then run a blur animation after 5 seconds
http://codepen.io/anon/pen/EarEzo
#-webkit-keyframes blur {
0% { -webkit-filter: blur(0px); }
100% { -webkit-filter: blur(5px); }
}
#-moz-keyframes blur {
0% { -moz-filter: blur(0px); }
100% { -moz-filter: blur(5px); }
}
#keyframes blur {
0% { filter: blur(0px); }
100% { filter: blur(5px); }
}
main {
-webkit-animation: blur 1s linear 5s 1 forwards;
-moz-animation: blur 1s linear 5s 1 forwards;
animation: blur 1s linear 5s 1 forwards;
}
In this example http://codepen.io/anon/pen/gbqeVV I've also activated the close action via CSS :target pseudoclass. If the overlay element is a sibling of the content wrapper then you could transform the “close” label into a link as in the example, then add this style
#close-layer:target {
display: none;
}
#close-layer:target ~ main {
-webkit-animation: none;
-moz-animation: none;
animation: none;
-webkit-filter: blur(0);
-moz-filter: blur(0);
filter: blur(0);
}
The same effect can be also achieved without setting an hash, e.g. using an hidden checkbox and the :checked pseudoclass: http://codepen.io/anon/pen/XJOqJV
#closeoverlay { display: none; }
#closeoverlay:checked ~ .modal-newsletter-wrap {
display: none;
}
#closeoverlay:checked ~ main {
-webkit-animation: none;
-moz-animation: none;
animation: none;
-webkit-filter: blur(0);
-moz-filter: blur(0);
filter: blur(0);
}
Another approach is just one line of css: backdrop-filter: blur(1rem);:
<div class="some-background">
<div style="backdrop-filter: blur(1rem);"></div>
</div>
I am a bit new to CSS but am creating a website on Squarespace and am having trouble overriding the parent class. Basically, I have been trying to make it so that all images in the grid are dark, and when you hover over them they light up along with the text. The problem is, the text from h2 and h3 always seem to be overridden by the opacity of the .wrapper.
Currently the source code looks something like this:
<div class="item">
<a href="/news/" data-dynamic-load data-dynamic-receiver="#detail_540e1c21e4b00b3e087650b7" >
<div class="wrapper">
<div class="project-title">
<h2>NEWS</h2>
<h3>— view —</h3>
</div>
</div>
</div>
I have tried a few ways, between displaying and using opacity. Something like:
#grid .item {
.wrapper {
opacity: 1;
.project-title h2,h3 {
display:none;
}
}
&.hovering .wrapper {
opacity: 0;
.project-title h2,h3 {
display:block !important;}
}
}
Any advice in fixing this issue?
I believe this is what you are looking for. You can put this into the Custom CSS are under Design. Any image that is a link will appear black and white until hovering. Hovering will bring them full color.
Target Slideshow - Should work with Gallery
#slideshow .slide img {
-webkit-filter: grayscale(1);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
#slideshow .slide img:hover {
-webkit-filter: grayscale(0);
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
Targeting Linked Images Only
a:link img {
-webkit-filter: grayscale(1);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
a:hover img {
-webkit-filter: grayscale(0);
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
I'm working on a webpage where if you hover over an image, it'll desaturate. It works in Chrome and IE. However, I can't get the transition to work in FF and it doesn't desaturate at all in Opera.
Here's my code:
<!DOCTYPE html>
<head>
<style type="text/css">
img:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0.0\'/></filter></svg>#grayscale"); /* Firefox */
filter: gray; /* IE */
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-webkit-filter: grayscale(1); /* Webkit */}
img {
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-o-filter: grayscale(0);
filter: none;
filter: grayscale(0);}
img.transition {
-moz-transition: all 0.5s ease-in-out; /* FF */
-o-transition: all 0.5s ease-in-out; /* Opera 10.5 */
-webkit-transition: all 0.5s ease-in-out; /* Webkit */
transition: all 0.5s ease-in-out;}
</style>
</head>
<html>
<body>
<img src="http://www.wallpapershd.biz/wallpapers/2012/12/Cardinal-Bird-1024x1280.jpg" width="500" class="transition" />
</body>
</html>
I've seen similar questions but I'm kind of a beginner, so the answers were a little abstract; you don't have to provide me with the code yourself, but point me to a somewhat detailed answer that I can understand. If anyone could help me out, that would be great.
Why wouldn't you use a simple color transition from red to grey?