Hello,
How can I copy this functionality from Newsmag? http://screenshot.net/3g7g9f8.jpg
I’ve managed to implement this code
.entry-title :hover{
background-color: rgba(1, 155, 209, 1) !important;
color: white !important;
text-decoration: none !important;
transition: all 250ms ease;
}
but it only works when I’m over the post title. I want it to change the same way and at the same time when I’m hovering the post thumbnail.
Is this possible?
Thank you.
Hi,
Please try this custom css in Theme Panel > Custom Css so when you hove on the image it will change title color:
.td_mod_wrap:hover .entry-title a {
color: red !important;
}
Thanks!
Excellent! It works.
One more question: can I add the category name on the post thumbnail, like it shows on Newsmag?
Thanks again!
Hi,
Please follow this topic to display categories on modules/blocks: https://forum.tagdiv.com/topic/category-display-info/
Thanks!
Hello, is it possible to desaturate the thumbnail´s color via CSS?
There are too many colors in the homepage and, in my case, this could be a problem.
I prefer to have the color when hover on the image, so I am looking for exactly this: Create a Black & White Thumbnail in WP
Can you help me?
Thanks.
Hi,
If you want to reduce the color intensity on your homepage, please use this code:
.home img{
-webkit-filter: grayscale(40%);
-moz-filter: grayscale(40%);
-ms-filter: grayscale(40%);
-o-filter: grayscale(40%);
filter: gray;
}
If you want it closer to gray, increase the percentage.
Add it in the theme panel -> custom css box.
Thank you!
Hi Bogdan, I´ve used the code you wrote, copy and paste in theme panel -> custom css box
but it doesn´t work … why is that?
thanks again.
Hi,
The code only applies on the homepage. I set it like that. If your page is not the homepage, the code will not apply. If you want to set it to a specific page, then you will need the page id you can get like so: http://screencast.com/t/ODoxw6ssd
In this case i would use the code like so:
page-id-xxx img{
-webkit-filter: grayscale(40%);
-moz-filter: grayscale(40%);
-ms-filter: grayscale(40%);
-o-filter: grayscale(40%);
filter: gray;
}
xxx is the page id number
Hope this helps.
Thanks.
Thanks.. I had to change filter:gray to filter:grayscale(40%) and now it works.
The only problem remaining is that the main Logo (located in HEAD) is also affected by desaturation.
Can I fix it?
Hello nanokio,
Please provide your website URL so I can inspect it closer and also, so I will be able to provide a more accurate response.
Thanks.
Thanks Catalin,
this is the website: http://divulgauned.es/
You´ll see that logo image is also affected by desaturation on those pages where filter is applied (homepage and categories pages for example)
Hello nanoklo,
Please try to replace your code above with the below code to exclude your logo section.
The code is ->
.home .td-main-content-wrap img {
-webkit-filter: grayscale(40%);
-moz-filter: grayscale(40%);
-ms-filter: grayscale(40%);
-o-filter: grayscale(40%);
filter: gray;
}
The result you should see here -> http://screencast.com/t/dy2nv2D1
Hope this helps!
Thanks.
It works. You are great!
