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%);
}
Related
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 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
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 want to make a div background transparent so i used this css
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-ms-filter: blur(1px);
-o-filter: blur(1px);
filter: blur(1px);
also see this fiddle: http://jsfiddle.net/LUy3W/
I want only the div to be blurred but all the content in that div is also being blurred. How to make only that background div blur and make its content visible like normal text?
any thoughts? please help.
This can now be accomplished with a single line of CSS using the backdrop-filter property (along with many other filter effects), however browser support at the time of writing is very poor, so make sure to provide a fallback version for unsupported browsers as well as the -webkit- prefixed version for now.
.wrapper {
height: 400px;
width: 400px;
background-image: url('https://i.imgur.com/iAgdW.jpg');
background-size: cover;
}
.inner {
background-color: rgba(255, 0, 0, 0.5);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
padding: 50px;
}
<div class="wrapper">
<div class="inner">my text</div>
</div>
The rendered output in supported browsers will look like:
The content can't be inside the blurred div, so use a sibling element instead:
HTML
<div class="wrapper">
<div class="content">my text</div>
</div>
CSS
.wrapper {
height:400px;
width:400px;
position: relative;
}
.wrapper::before{
width:100%;
height:100%;
position: absolute;
background-image:url('https://i.imgur.com/iAgdW.jpg');
background-size:cover;
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-ms-filter: blur(4px);
-o-filter: blur(4px);
filter: blur(4px);
}
.content{
position: absolute;
background-color:red;
}
Demo fiddle
For example.
The html
<div class="div-Blur">
<div class="div-inside-blur">
</div>
</div>
The css
.div-Blur {
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-ms-filter: blur(1px);
-o-filter: blur(1px);
filter: blur(1px);
}
edit: try this plse
.div-inside-blur {
background: blue;
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-ms-filter: blur(0px);
-o-filter: blur(0px);
filter: blur(0px);
}
I am trying to blur an image using CSS. I'm usig "blur" but I'm finding this also blurs the border. Is there a way to keep the border straight but blur the rest of the image?
http://www.inserthtml.com/2012/06/css-filters/
css
filter: filter(value);
-webkit-filter: filter(value);
-moz-filter: filter(value);
-o-filter: filter(value);
-ms-filter: filter(value);
Try something like this:
HTML:
<div id="container">
<img id="image" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Benz-velo.jpg/220px-Benz-velo.jpg">
</div>
CSS:
#image{
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
margin:-1px;
padding:1px;
}
#container{
width:222px;
height:179px;
overflow:hidden;
}
The margin on the image seems to be required for some reason (at least in Chrome).
Also on jsfiddle: http://jsfiddle.net/jdwire/HUaBV/1/.
You will likely need to wrap that image in a block-level element and set its dimensions to match the image and add overflow: hidden.
Wrap a div around the image and size the div a few pixels smaller than the image is sized (otherwise the edge of the blur won't be cropped). Then put overflow:hidden on the div.
See the jsFiddle demo here.
Have a div with the border just enclose on it then blur the image.
css
div.container
{
border:2px solid #000000;
display:inline-block;
}
img.theimage
{
filter: filter(value);
-webkit-filter: filter(value);
-moz-filter: filter(value);
-o-filter: filter(value);
-ms-filter: filter(value);
}
html
<div class="container">
<img class="theimage" src="iamgesrc.jpg" />
</div>
To keep the edges sharp you can first move the image within it's container left and up the same amount of the blur—this will clean up the top/left edges. To sharpen the bottom/right edges reduce the width of the image's container by 2 * the blur amount.
#image {
filter: blur(5px);
-webkit-filter: blur(5px); /* support appears limited http://caniuse.com/#search=css%20filter%20effects */
margin-left: -5px; /* move the image negative x-blur distance */
margin-top: -5px; /* move the image negative y-blur distance */
}
#container {
/* actual image size is 220px * 177px */
width: 210px; /* subtract 2 * x-blur from width */
height: 167px; /* subtract 2 * y-blur from height */
overflow: hidden;
}
Joshua's Fiddle elaborated here: http://jsfiddle.net/3EHe9/