tomnjerry74 93 Posted September 8, 2020 Share Posted September 8, 2020 (edited) Hello everyone, Does anyone know what the CSS would be to remove the vignette overlay when hovering over posters? I'm looking to replace it with a border outline instead. Edited December 27, 2020 by tomnjerry74 Link to comment Share on other sites More sharing options...
tomnjerry74 93 Posted September 8, 2020 Author Share Posted September 8, 2020 Update: I've noticed this doesn't just apply to movie posters. I'd like to remove it for every item that has it. Link to comment Share on other sites More sharing options...
Happy2Play 8139 Posted September 9, 2020 Share Posted September 9, 2020 You mean like this? div.cardOverlayContainer {background: transparent; } 1 Link to comment Share on other sites More sharing options...
tomnjerry74 93 Posted September 9, 2020 Author Share Posted September 9, 2020 7 minutes ago, Happy2Play said: You mean like this? div.cardOverlayContainer {background: transparent; } Yes! Thank you Link to comment Share on other sites More sharing options...
Happy2Play 8139 Posted September 9, 2020 Share Posted September 9, 2020 Are you doing something like this. div.cardOverlayContainer { background: transparent; border-style: solid; border-color: blue; } 2 Link to comment Share on other sites More sharing options...
arrbee99 1544 Posted September 9, 2020 Share Posted September 9, 2020 (edited) I am! div.cardOverlayContainer { background: transparent; border-style: solid; border-width: 4px 4px 4px 4px; border-color: #5d7e9b; border-radius: 0.3rem; } Thank you Edited September 9, 2020 by arrbee99 1 Link to comment Share on other sites More sharing options...
PenkethBoy 2063 Posted September 9, 2020 Share Posted September 9, 2020 had a play with this and for me i reduced the px to 1.5 the box is more blue on my screen than shows in the screen shot 2 Link to comment Share on other sites More sharing options...
tomnjerry74 93 Posted September 9, 2020 Author Share Posted September 9, 2020 13 hours ago, Happy2Play said: Are you doing something like this. div.cardOverlayContainer { background: transparent; border-style: solid; border-color: blue; } Yes thank you! I've also been trying to get all cards to zoom in maybe about 1.05 scale on hover. Unfortunately, it seemed impossible to get it to work with the infinite scrolling movies page so I gave up on it. Whenever I applied it, only that specific page would go wonky. Link to comment Share on other sites More sharing options...
PenkethBoy 2063 Posted September 9, 2020 Share Posted September 9, 2020 @tomnjerry74 mine works fine with inf scroll on movies page etc - try this - i have it at 1.03 as higher and the box does not render correctly this is with .25 beta and chrome 85 /*----- Posters slightly transparent, then opaque on hover ----*/ .cardBox{opacity: .85;} .cardBox:hover{opacity: 1;} /* ----- Poster background colour change and shadow on hover ----*/ .cardBox:hover {background:transparent !important; -webkit-box-shadow: 0px 2px 4px #000000; -moz-box-shadow: 0px 2px 4px #000000; box-shadow: 0px 2px 4px #000000; } /*--- Remove Play Indicator ---*/ .cardOverlayFab-primary {display: none !important} /* ----- Poster enlarge on hover ---- (V 2.9 - modified scale) */ .cardBox{transition:all 0.15s;} .cardBox:hover {transform:scale(1.03);transition:all 0.15s;} /*---- Add blue box around focused item (v2.9) ----*/ div.cardOverlayContainer { background: transparent; border-style: solid; border-width: 1.5px 1.5px 1.5px 1.5px; border-color: #4285F4; border-radius: 0.3rem; } 2 Link to comment Share on other sites More sharing options...
tomnjerry74 93 Posted September 9, 2020 Author Share Posted September 9, 2020 (edited) On 9/9/2020 at 1:06 PM, PenkethBoy said: @tomnjerry74 mine works fine with inf scroll on movies page etc - try this - i have it at 1.03 as higher and the box does not render correctly this is with .25 beta and chrome 85 /*----- Posters slightly transparent, then opaque on hover ----*/ .cardBox{opacity: .85;} .cardBox:hover{opacity: 1;} /* ----- Poster background colour change and shadow on hover ----*/ .cardBox:hover {background:transparent !important; -webkit-box-shadow: 0px 2px 4px #000000; -moz-box-shadow: 0px 2px 4px #000000; box-shadow: 0px 2px 4px #000000; } /*--- Remove Play Indicator ---*/ .cardOverlayFab-primary {display: none !important} /* ----- Poster enlarge on hover ---- (V 2.9 - modified scale) */ .cardBox{transition:all 0.15s;} .cardBox:hover {transform:scale(1.03);transition:all 0.15s;} /*---- Add blue box around focused item (v2.9) ----*/ div.cardOverlayContainer { background: transparent; border-style: solid; border-width: 1.5px 1.5px 1.5px 1.5px; border-color: #4285F4; border-radius: 0.3rem; } Thank you! That scale transform you posted works great. The only problem I have left is getting the zoom and border to ignore the main poster art on movie detail pages, album detail pages, etc. It's pretty glitchy and clips through different divs: Have you happened to mitigate this by chance? Thank you again for your help. Edited December 27, 2020 by tomnjerry74 Link to comment Share on other sites More sharing options...
PenkethBoy 2063 Posted September 9, 2020 Share Posted September 9, 2020 yep seeing the same on detail page not fixed it yet - but my initial guess is its another css "conflicting" Have you removed all css apart from what i posted to see? Link to comment Share on other sites More sharing options...
Happy2Play 8139 Posted September 9, 2020 Share Posted September 9, 2020 (edited) 25 minutes ago, PenkethBoy said: but my initial guess is its another css "conflicting" Yes it would appear to this item.css forcing margins.. .detailImageContainerCard .cardBox { margin-right: 0!important; margin-top: 0!important; margin-bottom: 0!important; } Quick fix use .cardBox-bottompadded instead of .cardBox. But if you disable Show fields Title and Year this will stop this zoom as there will no longer be a bottompadded. /* ----- Poster enlarge on hover ---- (V 2.9 - modified scale) */ .cardBox-bottompadded{transition:all 0.15s;} .cardBox-bottompadded:hover {transform:scale(1.03);transition:all 0.15s;} Edited September 9, 2020 by Happy2Play 1 Link to comment Share on other sites More sharing options...
PenkethBoy 2063 Posted September 9, 2020 Share Posted September 9, 2020 @Happy2Play Interesting - i dont have the margin etc css but -bottompadded is working i had added this which works but has issues when the page is at different scales /* ----- Poster enlarge on hover ---- (V 2.9 - modified scale) */ .cardPadder-portrait{transition:all 0.15s;} .cardPadder-portrait:hover {transform:scale(1.03);transition:all 0.15s;} /*---- Add blue box around focused item (v2.9) ----*/ div.portraitCard.detailImageContainerCard:hover { background: transparent; border-style: solid; border-width: 2px 2px 2px 2px; border-color: #4285F4; border-radius: 0.3rem; } in addition to what i posted earlier Link to comment Share on other sites More sharing options...
Happy2Play 8139 Posted September 9, 2020 Share Posted September 9, 2020 3 minutes ago, PenkethBoy said: Interesting - i dont have the margin etc css Everyone does as it is in the item.css. Image from 4.5+ but 4.4.3.0 is the same. Link to comment Share on other sites More sharing options...
PenkethBoy 2063 Posted September 9, 2020 Share Posted September 9, 2020 ah ok missed you were referring to item.css Link to comment Share on other sites More sharing options...
tomnjerry74 93 Posted September 9, 2020 Author Share Posted September 9, 2020 .cardBox-bottompadded worked great. Thanks for your help @Happy2Play and @PenkethBoy - really appreciate it. Link to comment Share on other sites More sharing options...
arrbee99 1544 Posted September 9, 2020 Share Posted September 9, 2020 Sorry, but can't resist the opportunity to point out (again) that you save yourself a tiny amount of trouble if you just get rid of posters on detail pages, which has the added bonus of a much nicer result, in my not so humble opinion Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now