This topic is part of our CSS Tutorials and Add-ons section: https://myanimelist.net/forum/?topicid=2077862 Thanks to @takana_no_hana for inspiration and codes I borrowed for this! Move your cursor on a row to pop up the preview pics for it! Add this to any list design. Won't work on some layouts with big preview pics already, since they are structured differently.  How to install hovering preview pics Step 1. First of all, Image must be checked on this page: https://myanimelist.net/editprofile.php?go=listpreferences Step 2. Save after. Then you must add this to the top of your CSS. @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkafter"; Step 3. Finally you must also add this to the bottom of your CSS and save. All done! If the preview pics ever become blurry or missing, consult this topic: https://myanimelist.net/forum/?topicid=439897
/* COVER SIZE */
.data.image a:after{
width: 200px;
height: 300px;
}
/* COVER POSITION */
.data.image a:after{
position: fixed;
top: 1%;
left: calc(50% - 750px);
}
/* OTHER CODES */
.data.image a:after
{content: "";
display: block !important;
background-color: rgba(0,0,0,.3);
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover;
border: 1px solid #ffffff;
box-shadow: 0 2px 5px rgba(0,0,0, 0.7);
visibility: hidden;
opacity: 0;
transition: opacity .8s linear, margin-left .5s ease, transform 1s ease-in-out;
z-index: 5;}
.list-table .list-table-data:hover .data.image a:after {
visibility: visible;
opacity: 1;
transition: .3s ease-out;}Moving the covers, resizing them They are set to move just to the left of the default list style. However, go to /* COVER POSITION */ and adjust the percentage after top to change the vertical position of the preview pic. Change the 750px value after left to move the the preview pic left or right. For instance, a value of 50% + 750px will move it to the right side. The dimensions of the covers can be increased with the codes under /* COVER SIZE */. After a width of 225px, the covers may start to lose quality. Remove smaller default pics You can add these codes to remove the anime or manga's default preview pic from view when "hovering" with .list-table .list-table-data:hover .data.image .image{
opacity: 0;
}Alternatively, to remove all default preview pics from view, you'd have to add these codes (you'd still see the hovering ones). It would look similar to the preview pic below. .data.image .image{
opacity: 0;
display: none;
}
.list-table .list-table-header .header-title.image {
font-size: 1px !important;
display: block !important;
border-width: 0 !important;
background: none !important;
position: fixed !important;
opacity: 0;
display: none;
} How to install hovering Tags too (mini-reviews)  First of all, tags must be checked on this page: https://myanimelist.net/editprofile.php?go=listpreferences Secondly, install these codes to bottom of your CSS. Moving and resizing them is similar to the preview pic options above.
/* TAG TEXT COLOR AND SIZE */
.list-table .list-table-data .data.tags * {
color: blue !important;
font-size: 12px;
}
/* TAG TEXT POSITION*/
.list-table .list-table-data .data.tags {
position: fixed;
left: calc(50% - 750px);
top: 33%;
}
/* OTHER CODES */
.list-table .list-table-data .data.tags {
position: fixed;
opacity: 0;
display: inline !important;
line-height: 16px !important;
font-family: Segoe UI, Atilla, Arial, Helvetica, sans-serif;
text-align:left;
width:150px !important;
height:auto !important;
background-color:rgba(0,0,0,.5);
box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 4px #000, 0 0 0 #000;
pointer-events: none;
/* animation */
z-index: 6;}
.list-table .list-table-data:hover .data.tags, .list-table .list-table-data:hover .data.tags span:after {
opacity: 1;
padding:5px;
box-sizing: border-box;
transition: opacity .3s linear, margin-left .5s ease, transform 1s ease-in-out;}
.list-table .list-table-header .header-title.tags {
font-size: 0px !important;
display: block !important;
border-width: 0 !important;
background: none !important;
position: fixed !important;
}
.list-table .list-table-data .tags .edit{
display: none;}
.data.tags a
{
white-space: inherit !important;
}
Add highlights! Combine it with the row hover highlight codes! https://myanimelist.net/forum/?topicid=1567153 |
Shishio-kunMar 25, 2023 9:51 AM
| what do u mean ' top of your CSS'? where is that? |
| and why is my profile not appearing here in the chat? |
This page: https://myanimelist.net/ownlist/style There's a theme here where you shaded the bubble next to anime and manga, that is the theme you're using currently. You click the theme and on the page it leads you to a page with an add CSS box, normally the CSS codes people copy/paste or edit are in there. You'd place the codes from this topic in that box, and on the top (in front) of any codes in that box already. This is a pic of the box (empty in my example)  I think you are using the default theme atm: https://myanimelist.net/ownlist/style/theme/1 |
| Got it thankyou <3 |
| it didn't work, i copied like you said why is that, is it because I use default theme? |
| and how can i attach img file? when I click in 'insert an image' button it ask me url how does it work? and again why is my profile pic not showing? sorry to dumb you all those questions but I have no one to ask |
hiro_hikari said: and how can i attach img file? when I click in 'insert an image' button it ask me url how does it work? and again why is my profile pic not showing? sorry to dumb you all those questions but I have no one to ask You have to set the forum pic here, it's different from your profile pic https://myanimelist.net/editprofile.php?go=forumoptions You need BBcode to insert images, this is where you upload a pic to Imgur then post the image link on MAL. It's shown how under Posting Images and GIFs https://myanimelist.net/forum/?topicid=496203 hiro_hikari said: it didn't work, i copied like you said why is that, is it because I use default theme? You have the codes on your list but they aren't working, I think the import line at the very top needs the slash removed (the slash in between @ and import). Then it will look like this: @import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkafter"; |
fleafyz-_- said: i'm trying to change the text color for the hovering tags but it just stays blue, am i doing something wrong? It conflict with another set of codes added:
/*==============================*\
| Category-Coloured List Text |
\* --- - --- - ---- - --- - --- */
.data a:not(.edit-disabled):hover {
text-decoration: underline;
}
.list-item .data.watching ~ .data a:not(.edit),
.list-item .data.reading ~ .data a:not(.edit) {
/* Watching */
color: #2db039 !important;
}
.list-item .data.completed ~ .data a:not(.edit) {
/* Completed */
color: #26448f !important;
}
.list-item .data.onhold ~ .data a:not(.edit) {
/* On Hold */
color: #f1c83e !important;
}
.list-item .data.dropped ~ .data a:not(.edit) {
/* Dropped */
color: #a12f31 !important;
}
.list-item .data.plantowatch ~ .data a:not(.edit),
.list-item .data.plantoread ~ .data a:not(.edit) {
/* Planned */
color: #c3c3c3 !important;
}So you can remove them, or try. That's completed tags only tho
.list-item .data.completed ~ .data.tags a{
/* Completed */
color: red !important;
} |
| I really like this code. This was what brought me to the club when I first started tweaking my list. But is there a way to have images appear on hover along with the anime/manga information bubble for the Top Anime and Top Manga pages (so we wouldn't have to zoom in and out or squint)? Hmm, that's probably gonna be a separate script... Is there already one? (Related: show image in information bubble when hovering) |
| @IridescentJaune Yeah that's actually a pretty simple change I would think due to some ghost updates MAL added in the past few months for the list designers. So I'll see if I can put it in a CSS Stylus theme later :D |
| @Shishio-kun I wonder if there's a script like by hacker09 already? But if there was then I would've already learnt about that by now... Anyways, were you talking about the colourful mal theme (now w/ dark mode) by sunnysummerday (I wish there's a video tutorial to accompany the thread.)? Sorry, I'm not so familiar with Stylus and/or Stylish... I haven't tried either. It looks like the information bubbles on the Top Anime and Top Manga pages are still not fixed. (Details not showing when you have the mouse pointer on a series.). |
| @IridescentJaune No I don't have anything to do with Colorful. What I meant is I could maybe add a theme later that pops up a bigger image for each anime. I think it could be possible. You'd install the Stylus extension, then click install the theme on its page, and the big pic feature would be added. When it comes to the tooltip/info bubble thingie there's several errors https://myanimelist.net/forum/?topicid=2092934&msgid=69228830#msg69228830 I believe my dark theme linked in the signature fixes all these. And there's a stylus theme for fixing one of the errors but not the one you're referring to. I do want to add more videos! I actually made several but they have all been scrapped since MAL made many changes in the meantime.. so I have been delayed big time with stuff I wanted to do here ":D |
| @IridescentJaune Whats the mode you use (light dark?) and whats the exact issue you see? Because if you install Stylus you might be able to install those codes to your browser and fix the issue now, without waiting for a theme- the codes can be pasted into any browser through Stylus I left them there for the devs but they wont use em lol |
| I've tried changing the cover size, but nothing happens? |
 "๐ฎ๐น'๐ธ ๐ณ๐ด๐น ๐ฑ๐ฎ๐ฐ๐ช ๐ฎ ๐จ๐ฆ๐ณ'๐น ๐น๐ฆ๐ฑ๐ฐ ๐น๐ด ๐ต๐ช๐ด๐ต๐ฑ๐ช. ๐ฎ ๐ฏ๐บ๐ธ๐น ๐ฉ๐ด๐ณ'๐น ๐ฎ๐ณ๐ฉ๐บ๐ฑ๐ฌ๐ช ๐ฎ๐ณ ๐ต๐ด๐ฎ๐ณ๐น๐ฑ๐ช๐ธ๐ธ ๐ธ๐ฒ๐ฆ๐ฑ๐ฑ ๐น๐ฆ๐ฑ๐ฐ๐ธ." |
Reply to MrAddict
I've tried changing the cover size, but nothing happens?
| @MrAddict you're using Clarity's version of the cover mod so the code is different. i've modified the values for you. Or you can change them to your liking: 1- left: -205px 2- width: 190px 3- top: calc(50% - 132px) 4- height: 265px /*-S-T-A-R-T--------------------*\
| Hover Image on Circle R0.3 |
\*------------------------------*/
.data.image a {
overflow: visible;
}
.data.image a:before {
content: "";
position: absolute;
top: 50%;
left: -205px;
z-index: 50;
width: 190px;
height: 0;
background: var(--bg-dark) no-repeat center / cover;
border-radius: 8px;
box-shadow: 0 0 2px #000;
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
}
.data.image:hover a:before {
top: calc(50% - 132px);
height: 265px;
opacity: 1;
}
.data.image img, .data.image a:after {
border-radius: 50%;
}
/*------------------------E-N-D-*/ |
Reply to karmashizzle
@MrAddict you're using Clarity's version of the cover mod so the code is different.
i've modified the values for you. Or you can change them to your liking:
1- left: -205px
2- width: 190px
3- top: calc(50% - 132px)
4- height: 265px
i've modified the values for you. Or you can change them to your liking:
1- left: -205px
2- width: 190px
3- top: calc(50% - 132px)
4- height: 265px
/*-S-T-A-R-T--------------------*\
| Hover Image on Circle R0.3 |
\*------------------------------*/
.data.image a {
overflow: visible;
}
.data.image a:before {
content: "";
position: absolute;
top: 50%;
left: -205px;
z-index: 50;
width: 190px;
height: 0;
background: var(--bg-dark) no-repeat center / cover;
border-radius: 8px;
box-shadow: 0 0 2px #000;
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
}
.data.image:hover a:before {
top: calc(50% - 132px);
height: 265px;
opacity: 1;
}
.data.image img, .data.image a:after {
border-radius: 50%;
}
/*------------------------E-N-D-*/| @karmashizzle THANK YOU IT WORKS! |
"๐ฎ๐น'๐ธ ๐ณ๐ด๐น ๐ฑ๐ฎ๐ฐ๐ช ๐ฎ ๐จ๐ฆ๐ณ'๐น ๐น๐ฆ๐ฑ๐ฐ ๐น๐ด ๐ต๐ช๐ด๐ต๐ฑ๐ช. ๐ฎ ๐ฏ๐บ๐ธ๐น ๐ฉ๐ด๐ณ'๐น ๐ฎ๐ณ๐ฉ๐บ๐ฑ๐ฌ๐ช ๐ฎ๐ณ ๐ต๐ด๐ฎ๐ณ๐น๐ฑ๐ช๐ธ๐ธ ๐ธ๐ฒ๐ฆ๐ฑ๐ฑ ๐น๐ฆ๐ฑ๐ฐ๐ธ." |
Reply to Myslivir
How do you make these hovering preview pics work for custom preview pics? If it's even possible. For custom previews I use this code:
.data.image a[href*="/numberofanime"]:before{
content: "";
position:absolute;
display: block;
height: 70px;
width: 50px;
background-image:url(link);
background-size: cover;
background-position: center top;
}
.data.image a[href*="/numberofanime"]:before{
content: "";
position:absolute;
display: block;
height: 70px;
width: 50px;
background-image:url(link);
background-size: cover;
background-position: center top;
}
| @Myslivir Its almost certainly possible. Should be something like
.data.image a[href*="/1689"]:before{
content: "";
position:absolute;
display: block;
height: 70px;
width: 50px;
background: red;
}
.list-table .list-table-data:hover .data.image a:before{
content: "";
position:absolute;
display: block;
height: 250px;
width: 150px;
background: blue;
top: 100px;
left: -200px;
}Second set of codes is for hover or .data.image a[href*="/numberofanime"]:before{
content: "";
position:absolute;
display: block;
height: 70px;
width: 50px;
background-image:url(link);
background-size: cover;
background-position: center top;
}
.list-table .list-table-data:hover .data.image a[href*="/numberofanime"]:before,
.list-table .list-table-data:hover .data.image a[href*="/numberofanime"]:before,
.list-table .list-table-data:hover .data.image a[href*="/numberofanime"]:before
{
content: "";
position:absolute;
display: block;
height: 250px;
width: 150px;
top: 100px;
left: -200px;
}To make many hover with less codes What is the name of the anime with one of the custom preview pics you're using, and what category is it on? When I see it on your list I can edit and find the exact code for giving it hover |
| @Myslivir I dont see Oshi no ko at the top of any of your categories So I need you to tell me what category its on so I can test the codes compared to other anime on the list- so please tell me what category it is on but only if you customized its cover already. OK I found it at the bottom of completed. I had the wrong idea with the codes, you'll have to use this for custom covers and hover on that layout
/* CUSTOM COVER AND HOVER */
.data.image a[href*="/52034"]:before{
content: "";
position:absolute;
display: block;
height: 70px;
width: 50px;
background-image:url(https://i.imgur.com/utuG0AU.png);
background-size: cover;
background-position: center top;
}
.list-table .list-table-data:hover .data.image a[href*="/52034"]:after
{
background-image:url(https://i.imgur.com/utuG0AU.png);
}
So your CSS would look like this, the codes are at the bottom and I took out the closed comments part since that always causes errors, it even has with our best ppl who made many layouts and I dont want it interfering with the codes at the bottom (I highly recommend to take them out and put them on a notepad instead). |
Shishio-kunFeb 10, 1:13 PM
More topics from this board
» [CSS - MODERN] โญ๏ธ All ways to customize individual anime and individual list rows (mark your favorites!)Shishio-kun - Sep 4, 2020 |
12 |
by takkun_
»»
3 hours ago |
|
» [CSS - MODERN] โก๏ธ Fully-Customizable Layouts (2023 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
359 |
by CLModerno
»»
May 5, 7:50 PM |
|
» [CSS - MODERN] Add side renders to list layouts (including for each category!)Shishio-kun - May 15, 2021 |
3 |
by gwynsyl
»»
May 5, 1:41 PM |
|
» โ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )Shishio-kun - Apr 15, 2010 |
7819 |
by Nunphell
»»
May 5, 12:35 PM |
|
» [HALL OF LEGENDS] Hacker09, MyAnimeList's #1 coder!Shishio-kun - Dec 10, 2023 |
9 |
by hacker09
»»
May 2, 9:29 PM |