c_morgan314 Posted June 2, 2020 Share Posted June 2, 2020 Site URL: http://www.caitlinhutson.com I have already copied a CSS to change opacity of the overlay on my posters when hovering. The code I used is the following: .image-overlay {opacity: 0; transition: .3s ease;} .image-overlay:hover { opacity: 1} It gives the effect of turning the whole block from my image to an opaque green, with the text showing in both. However, when not-hovering, I added a background color to my Title Text to make it easier to read, and I would like that background to fade out as the opaque green fades in (since the text is very visible on the green without that extra coloring). I tried to use the same format as above but can't figure out what the item is called to make this change. I am looking to do it to all of my posters, so a code that applies to all would be awesome. Link to comment
tuanphan Posted June 10, 2020 Share Posted June 10, 2020 Add to Home > Design > Custom CSS .design-layout-poster:hover p { background: rgb(105,119,85) !important; box-shadow: 0.25em 0 0 rgb(105,119,85), -0.25em 0 0 rgb(105,119,85) !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.