- This topic has 11 replies, 4 voices, and was last updated 2 years, 9 months ago by
David.
-
AuthorPosts
-
March 22, 2018 at 1:42 am #526098
Radek
Hi, any idea how add some nice mouseover efect to featured images on blog page set up to columns ? Something like here: http://www.toman-design.com
Without any pagebuilder please…
ThanxGeneratePress 2.0.2GP Premium 1.5.6March 22, 2018 at 10:18 am #526576Tom
Lead DeveloperLead DeveloperI believe something like that would require some custom javascript.
There might be some tutorials out there that lay out the necessary HTML/CSS/JS. If you can find that, I might be able to help you integrate it with GP.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMarch 23, 2018 at 2:34 am #527542Radek
No need such a difficult effect. Only some nice CSS is sufficient. If someone knows some…
Now using only:.post-image:hover img {
opacity: 0.5;
}Effect with blog title on hover would be nice, so I can hide the blog titles and use only featured images on blog page…
Thanx
March 23, 2018 at 10:12 am #528215Tom
Lead DeveloperLead DeveloperYou could do something like this:
.inside-article { position: relative; } .post-image + .entry-header { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 500ms ease-in-out; } .post-image:hover + .entry-header { opacity: 1; pointer-events: none; }
Then you can style it better by adjusting the font size, top and left position, and making your images full width within their containers.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMarch 25, 2018 at 11:58 pm #530663Radek
Great, works perfect. Thanx a lot.
One more thing, image hover effect will disappear if I hover entry title. How can I adjust that ?
Can’t find the right selector for “entry-header:hover” to set “.post-image img” properties…March 26, 2018 at 9:34 am #531293Tom
Lead DeveloperLead DeveloperTry the adjusted CSS above.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMarch 26, 2018 at 11:34 pm #532018Radek
What an easy way if You know where to touch, perfect.
March 27, 2018 at 8:56 am #532645Tom
Lead DeveloperLead DeveloperAwesome 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentApril 10, 2020 at 3:55 am #1233711Ram
April 10, 2020 at 7:46 am #1233898David
StaffCustomer SupportHi there,
edit the second block of CSS to this:
.post-image + .entry-header { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; transition: opacity 500ms ease-in-out; opacity: 0; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/April 10, 2020 at 8:01 am #1234078Ram
Excellent, Worked like a charm. Thank you Mr.David.
Is there any way to add a black overlay over the image? so that the text will look brighter.
April 10, 2020 at 8:08 am #1234085David
StaffCustomer SupportMight be best if you raise a new topic where you can share a link to your site – we can provide a different lot of CSS
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.