everyone, I have created these buttons that animate when you hover over them. Everything works fine with the animations and how I want it to work functionally but for some reason every time you hover over any of the buttons a strange white line appears underneath. it's faint but it's very noticeable. I just want to know why it's doing this and what I can do to stop it. the code could be viewed in this codepen
The issue started when I added the following bit of css. Is it possible to resolve the problem? Thank you in advance.
.hero-content li:hover {
transform: translateY(-50px) scale(1) !important;
-webkit-filter: blur(0) !important;
-moz-filter: blur(0) !important;
-o-filter: blur(0) !important;
-ms-filter: blur(0) !important;
filter: blur(0) !important;
opacity: 1 !important;
}
.hero-content:hover li {
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);
transform: scale(.97);
opacity: .9;
}
After removing the following CSS properties from Codepen the issue was fixed
-webkit-filter: blur(2px);
filter: blur(2px);
Related
I tried the following code and it is not helping.
.information{
background-image:url(../images/needle_img.png),url(../images/broken_noise.png);
background-size: auto 60%, auto auto;
background-position:left bottom,top left;
-webkit-filter: brightness(0.8),brightness(1);
-moz-filter: brightness(0.7),brightness(1);
-o-filter: brightness(0.8),brightness(1);
-ms-filter: brightness(0.8),brightness(1);
filter: brightness(0.8),brightness(1);
background-repeat: no-repeat,repeat;
}
I've seen many websites that have a black and white image that transitions to a colored version with a :hover selector. What I'm trying to do is the same but with no user interaction. For example, the image would start black and white and fade to its colored version after 10 seconds.
Is this possible with CSS?
Like this?
#keyframes toColor {
0% { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
25% { -webkit-filter: grayscale(75%); filter: grayscale(75%); }
50% { -webkit-filter: grayscale(50%); filter: grayscale(50%); }
75% { -webkit-filter: grayscale(25%); filter: grayscale(25%); }
100% { -webkit-filter: grayscale(0%); filter: grayscale(0%); }
}
img.desaturate {
animation: toColor 10s;
}
<img src="http://i.imgur.com/gMPdDHk.jpg" alt="Lena Söderberg" style="width: 300px;" class="desaturate">
Another simple way to use rollOver behavior in order to launch the image colorization animation on image hover.
img{ filter: grayscale(100%); transition: filter .3s ease-in-out;}
img:hover { filter: none;}
I am using this CSS to make and image black and white.
img {
-webkit-filter: grayscale(100%); filter: grayscale(100%);
}
On hover of this image, I would like to remove the styles in order to change it back to color. My attempt:
img:hover {
-webkit-filter: grayscale(0%); filter: grayscale(0%);
}
Use none:
img:hover {
-webkit-filter: none;
filter: none;
}
How can I apply a Gaussian blur using CSS to a DIV which contains text. Basically, what I want to achieve is to have the box with a gaussian blur but the text in a normal way. Can this be done? I don't know how, I've been trying but I just can't.
Example:
Like I have my div at opacity: 0.75 I would like my div to be transparent but with gaussian blur, since in the background I have a moving image, so I want the box to be blurred.
Apply following CSS to your block:
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
However, this property works only in modern browsers: compatibility table
Well I don't think you can achieve what you are looking for without some extra div or even better a pseudo-element. My suggestion would be:
div {
position:relative;
width: 10em;
height: 20em;
padding: 1em;
}
div::before {
content: '';
position:absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
background: url(http://upload.wikimedia.org/wikipedia/en/6/6c/Some_Girls.png);
z-index: -1;
}
Your question is not too clear though so I am not sure if this is what you are looking for...
Pen: http://codepen.io/marczking/pen/dqxwG
Anyway, I blurred a div via this code:
background: #FFFFFF;
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);
opacity: 0.4;
But I want to put inside that blurred div some text, and the stays stays blur too after all, is there a way to cause the text itself only to not blur?
No, but:
You can position another element over the blurred element in that case.
See: z-index for this, along with the position: attribute.
Important: the element cannot be inside the blurred element and just have a higher z-index only. It needs to be outside it, positioned over the other one, and have a higher z-index than the blurred element.
Here is a very basic example, using position: absolute;:
http://jsfiddle.net/digitalextremist/ky3Ca/3/
Excerpt:
.unblurred {
position: absolute;
top: 5px;
left: 5px;
z-index: 9;
}
There are a lot of ways to do positioning. The above jsfiddle only shows one way to get you started.
You can position the text over the div using some other html element, check this fiddle:
http://jsfiddle.net/7PxzL/1/
HTML:
<div></div>
<span>This is the Text</span>
CSS:
div {
width:100px;
height:100px;
background: #cccccc;
z-index:-1px;
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);
}
span {
position:absolute;
top:10px;
left:10px;
}