Gridspace in Black and white
-
Hello,
I have the theme Gridspace and I managed to change the front page pictures in grey scale as default but is there a way to make the pictures appear in color when passing through them with the cursor?
The blog I need help with is: (visible only to logged in users)
-
I’m not seeing your images on the main page of http://twistedvi13.be/ as greyscale. Did you remove this?
Right now I’m still seeing the color images and also seeing the opaque black overlay when I hover them.
-
Yes it didn’t make sense next to the coloured Instagram pictures. The Css code is still there but the greyscale is on 55% now. I need to keep a little of colour in them but it would be nice if the colours became more vivid when the viewer hovers them instead of the grey overlay
-
One thing I’ll note here is that the CSS3 filter is only partially supported by browsers at this time (since the specification is still in flux), with no support at all in Internet Explorer, clear up through version 11, and there isn’t any word on whether IE12 will support it. Firefox is also an issue as it has only partial support, even in the latest version. I’m not seeing your grayscale filter being applied in Firefox 34.0. That said, add the following CSS to the very end of your custom CSS. It takes away the opaque dark grey and reverses the greyscale you have when the image is hovered.
.home article .entry-content a.thumb img:hover { opacity: 1 !important; -webkit-filter: grayscale(0); -moz-filter: greyscale(0); filter: greyscale(0); } .home article .entry-content a:hover { opacity: 1 !important; } .home article .entry-content a.thumb img { opacity: 1 !important; } -
Wow thats cool :D Thanks !Now have an other problem , my text on the pictures is not very visible anymore because it is showing in grey but in the color options it is set up as #00000. Its weird
I am a total CSS dummy sorry if my question sounds stupid :D -
-
I’m seeing white on the titles on some, and black on the titles on others, and some of them in black are very hard to read. Given the nature of the images, and the fact that neither black nor white text works for all the images, give the following a try which puts a very translucent white background on the title and text when hovered. It isn’t perfect, but it down allow the text to be read in most instances.
.vignetteu_descripBox { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.4); padding-left: 5px; padding-right: 5px; } -
this is what I used , and I am pretty happy about it but now I am looking to do this for all the menu pages. This is for my “home” but when I click on category / menu inspiration for example, it returns to the default setting
.home article .entry-content a.thumb img { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%); transition: .2s ease-in-out; -moz-transition: .2s ease-in-out; -webkit-transition: .2s ease-in-out; } .home article .entry-content a.thumb img:hover { opacity: 1 !important; -webkit-filter: grayscale(0); -moz-filter: greyscale(0); filter: greyscale(0); } .home article .entry-content a:hover { opacity: 1 !important; } .home article .entry-content a.thumb img { opacity: 1 !important; } .grid .portfolio .entry-content .entry-title a, .grid .portfolio .entry-content .entry-meta, .grid .portfolio .entry-content .entry-meta a { color: #222 !important; } -
If you want it to apply for all pages, remove the .home CSS body class from all of your CSS rules above.
- The topic ‘Gridspace in Black and white’ is closed to new replies.
WordPress.com Forums 