Maisha Theme // Cool Featured content effect
-
Hello!
Is there any way to replicate the cool effect the Maisha theme has for the front page featured posts images – ie black and white images until hover – on other parts of the front page, specifically on the First Content Block parent pages featured images? Thank you for any info regarding that?
(Also, little sidenote here: should I ask ALL my questions in a same thread for easy answering from the css wizards, or am I better keeping different topics separated for easier access for other clueless wordpress users?)
The blog I need help with is: (visible only to logged in users)
-
If you are asking about different topics, I would suggest separate threads. When people search and find threads in the future, it will be less confusing for them. Thanks in advance for that.
Are you talking about how the image appears when you hover over the 4 posts listed right above the footer widget area on the Maisha Demo page?
-
Thanks for your advice – that’s also how i see things regarding forum topics. And yes, I am referring to the effect on those specific images.
-
On the images, they are using a filter declaration, which I would have to play with a little in order to see exactly how it works as I’ve never done this sort of thing that way. I do have a couple of other ideas on how to achieve the same behavior though that might be more simple to implement. If you can point me to an image that you wish to do that with, I can see what I can do.
-
The three images in the first content block (business.jpg, visit.jpg and live.jpg) would be the ones I would like to use for that effect. Thank you for working on this with me, I appreciate it!
-
You can give the following a try. It does leave a large white space before the text, which looks a little strange.
.home .hentry .post-thumbnail img { opacity: 0; transition: opacity ease-in-out 0.3s; } .home .hentry .post-thumbnail img:hover { opacity: 1; }What I might suggest instead would be to set the non-hover opacity to something like 0.1 so you can see a hint of the image when not hovered.
.home .hentry .post-thumbnail img { opacity: 0.1; transition: opacity ease-in-out 0.3s; } .home .hentry .post-thumbnail img:hover { opacity: 1; }I also added a transition so that the image fades in and out gently. You can change the 0.3s (second) value to try other timings.
-
It is a cool effect, but I was looking at something more along the line of saturation/desaturation. Black and white images until hover to full color. Also, I dont want the effect to apply to all the pictures on my front page, and that’s what it does right now… I think I will forego that idea and try to work with the theme parameters for featured posts instead (as shown in the theme demo).
Thanks a thousand!
-
Ah, I should have caught that. We can do the grayscale with a filter and then limit it to just that one section with the following CSS. Give this a try and see what you think.
#post-149 img { filter: grayscale(100%); transition: filter ease-in-out 0.3s; } #post-149 img:hover { filter: none; } -
-
Hmmm, let’s add some browser-specific filters. One thing to note is that the grayscale may not show up in the Customizer Preview. You may have to save and then visit your site in order to see the grayscale and the hover effect.
#post-149 img { filter: gray; filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); -moz-filter: grayscale(100%); -webkit-filter: grayscale(100%); } #post-149 img:hover { filter: none; -ms-filter: none; -o-filter: none; -moz-filter: none; -webkit-filter: none; } -
-
-
- The topic ‘Maisha Theme // Cool Featured content effect’ is closed to new replies.
WordPress.com Forums 