This cover style uses Animetitle CSS. This topic is part of our CSS Tutorials and Add-ons section: http://myanimelist.net/forum/?topicid=419405 You may have seen many layouts with this effect:  You can get this too on pretty much any layout with this method I'll show you. It uses an animetitle CSS import for the covers. You ckeep the more button with this style, unlike most other cover styles which use #more style. Step 1: Add one of these to top of your CSS Add only one of these codes to the top of your layout, depending on whether its for an anime or manga layout. For anime lists (everything in bold goes on top of your CSS): For manga lists only (everything in bold goes on top of your CSS): Note: Don't add both imports to one layout code! You need to use the anime import only on an anime list and manga import only on the manga one. You will need two separate layouts for your anime and manga list, see making a separate layout for your manga list here: http://myanimelist.net/forum/?topicid=200320 Step 2: Add the CSS in this link to the bottom of your CSS edit box Click the link and add the codes it takes you to at the bottom of your CSS, it will be the codes you use to control the hover transition how you want! Extra info and FAQs What to do if some but not all, of your title pics don't show up If none of your titles are customized, or the covers suddenly disappear |
Shishio-kunNov 5, 2018 8:30 PM
| Question: Other people should see these pictures ? I just add it to my list, but it works only for me. |
MuaDDiB_94 said: Question: Other people should see these pictures ? I just add it to my list, but it works only for me. Yes other people will see the pics, but actually you didn't add the codes I posted to your list. Your codes you added that I never posted, on your list: My codes posted in this topic, on your list: Take out the ones you have there now and use the ones from this topic, and you will be in DVD cover paradise. |
Shishio-kunAug 29, 2012 7:51 AM
| Thanks. That works. |
| I have some problems with the tags, I added the last code, but it didn't work, what did I do wrong? |
Ayame_chan_ said: I have some problems with the tags, I added the last code, but it didn't work, what did I do wrong? You put 5 instead of 6 in : td:nth-of-type() { line-height: 20px !important; } #(1), Anime Title(2), Score(3), Type(4), Progress(5), Tags(6). |
| OMG, I'm so stupid, I didn't realize that I had to count the "#" too,Thank you so much. ^^ |
| 2SaiZaro See CSS Generator |
 |
| I really like this. It doesn't take up as much room as showing all the covers. I've encountered a problem though: When I hover over it, the picture doesn't show. It's not one or a two, but all of them are blank. They still expand however, and I've realized that the cover seems to have become the text background. This is what I mean: Is it something to do with the navy highlight? If so how do I remove that navy colour? |
| There are somethig wrong in your code, you need to use tbody:hover .animetitle instead of tr:hover .td1, tr:hover .td2, 'cause the covers realy are the .animetile background, and not only the lin-height, also display: inline-block and height: 200px(or whatever you want) instead of line-height, but even with that change is not completly done.. I recomend you to use Firebug(Firefox) or DragonFly(Opera) and put your CSS code in Dropbox, it's simple and you can make changes without touch MAL settings... This is how it looks with those changes: |
al_exsAug 28, 2012 10:15 PM
| Thanks for the help. VeriTi said: @MM-Rosiie Looks like you forgot this: Then, after you add one of these, add this code above that one: @import "http://dl.dropbox.com/u/78340470/CSSforCatgirls.css"; Ah! I added that and it works now. How do I resize the pictures? (Or can I only adjust the height on hover?) For the long titles, the text and picture also overlap and (airing) is pushed to the bottom (if I can't resize, do I increase width?) Also, some turn out like this. Is it something in my code or do I need to use the #more CSS generator? I would like to use firebug, but I use Chrome, so would I get Firebug lite or is there another program? |
| 2MM-Rosiie: if you don't see a cover, that means the cover doesn't contains in the premade CSS which includes only 4500 anime/manga titles. You should to use any covers generator by yourself. The picture sizes is in @import "http://dl.dropbox.com/u/78340470/CSSforCatgirls.css"; line, but that doesn't includes all the nessesary parameters. For example (should be imported): In your case a height of a picture is in the following code: You should to delete the code at the bottom of your CSS, because it's useless (should be placed on a file hosting service and imported into your CSS. But your CSS has another structure and needs to be correct): |
HahaidoAug 29, 2012 10:15 AM
|
| @MM-Rossie: use the Covers Generator, with this you can change many things on the list simple and fast. And install Firefox with the extension Firebug, or Opera, just for CSS design. I got 5 Browsers installed(IE, Chrome, Lunascape, Firefox, Opera) just to check how my design looks in every kind of browser. |
| Alright so I increased the height so the full picture shows. I also deleted the useless code. And...is there a way to get rid of the navy/ dark color that fills in the box when I hover over it? If possible I just want it to expand, staying translucent. |
MirorinAug 29, 2012 12:07 PM
MM-Rosiie said: And...is there a way to get rid of the navy/ dark color that fills in the box when I hover over it? If possible I just want it to expand, staying translucent. delete background-color: black; in: .category_totals:hover, .td1:hover, .td2:hover, #grand_totals:hover, #copyright:hover { section. |
| How do I get rid of the blank space between titles? (The covers show up fine) |
zhuayunSep 16, 2012 5:05 PM
| With the selector .hide do following |
|
| can you help? The cover does not hover. Cant really figure out where is the problem. tried to change the values, didnt work. the scipt |
drigerm3 said: can you help? The cover does not hover. Cant really figure out where is the problem. tried to change the values, didnt work. There was few errors in your CSS that I corrected: |
HahaidoOct 30, 2012 1:18 AM
|
TUF said: Is there a way to adjust the size of the covers like with the other code that changes your titles to pictures? Try to use CSS generator - http://myanimelist.net/forum/?topicid=461553 |
|
TUF said: Thank you. It will take some time to figure out but this will come in handy. If you have any question feel free to ask! |
|
| Hey guys :) I have a problem with my premade layout .. I'm not so sure is that the right place to post this here..So i'm sorry if there's have a mistake. http://imageshack.us/photo/my-images/854/coverbug.jpg/ I get the code of http://myanimelist.net/animelist/u531355 with using firebug . But as you can see on the picture.. There's have a "cover bug".. and i don't know how to fix it can you guys help me ? |
Mike-kun said: Hey guys :) I have a problem with my premade layout .. I'm not so sure is that the right place to post this here..So i'm sorry if there's have a mistake. http://imageshack.us/photo/my-images/854/coverbug.jpg/ I get the code of http://myanimelist.net/animelist/u531355 with using firebug . But as you can see on the picture.. There's have a "cover bug".. and i don't know how to fix it can you guys help me ? I'm gonna assume its cuz you don't have numbers checked and its thrown off the design of this layout. Look under "Some list settings are needed for this layout." on installing the Square layout: http://myanimelist.net/forum/?topicid=459189&show=0 btw when you don't know where to post use the Ask a Question topic at the top of the main page. |
| Hi, I'm not using your premade cursor hover but I want to know if you can help me with this problem:) (since it seems my topic was removed from "support") Ok so the problem is that when I make a cursor hover over a tittle it appears like this Sorry for oversized image. |
 |
raurux said: Hi, I'm not using your premade cursor hover but I want to know if you can help me with this problem:) (since it seems my topic was removed from "support") Ok so the problem is that when I make a cursor hover over a tittle it appears like this Sorry for oversized image. There's a white border around the pointer cuz you need to use a PNG with a transparent background around the cursor, not an image that was JPG before. JPG will never have transparent backgrounds. btw custom cursor isn't done with background, its done with cursor. So it'd be something like: .hide:hover { cursor: crosshair; } or with a custom cursor image .hide:hover { cursor: url("http://dl.dropbox.com/u/78192465/MyAnimeList/Ichika/Images/cursor.png"); } Not sure if you're asking about this too but the title pic is blank because you aren't using corresponding codes for the hover pics and more CSS import, also it doesn't seem to match up with your titles exactly. This would happen if the #more CSS import wasn't generated for your list specifically. |
Not sure if you're asking about this too but the title pic is blank because you aren't using corresponding codes for the hover pics and more CSS import, also it doesn't seem to match up with your titles exactly. This would happen if the #more CSS import wasn't generated for your list specifically. How can I resolve that exactly?:) Thank you for your cooperation btw ;D |
|
| 2raurux: You're using covers generated for .hide:before selector so you need to customize this class by adding following code to your CSS (example): .hide:hover:before { visibility: visible !important; position: absolute !important; display: block !important; content: ''; margin-top: 2px; margin-left: -250px; width: 200px !important; height: 284px !important; background-repeat: no-repeat !important; background-size: 200px 284px !important; } |
|
Hahaido said: 2raurux: You're using covers generated for .hide:before selector so you need to customize this class by adding following code to your CSS (example): .hide:hover:before { visibility: visible !important; position: absolute !important; display: block !important; content: ''; margin-top: 2px; margin-left: -250px; width: 200px !important; height: 284px !important; background-repeat: no-repeat !important; background-size: 200px 284px !important; } That worked! some of the tittles don't show up but I can live with that :D, thank you:) |
|
| 2raurux: It's a magic! |
|
| I dont know why my rows are not expanding |
| sigh.. |
wishkas said: I dont know why my rows are not expanding Find this line of code: .status_not_selected { Then this line under it: filter: alpha(opacity=50; delete it or make it filter: alpha(opacity=50); Do the same under .status_not_selected. Both of them are in the middle and start under section titled /* Which 'status' up top is selected? */. |
| thanks a lot : ) |
| sigh.. |
| I'm having some problems XD http://prntscr.com/4snxoy For some reason the Cover is not showing up when i hover over the title The cover CSS link is Here: https://dl.dropboxusercontent.com/s/cns58geer8o3fav/Cover.CSS?dl=0 If someone could tell me why this is happening that would be amazing c: thanks :D |
ZmBzRALIVE said: I'm having some problems XD http://prntscr.com/4snxoy For some reason the Cover is not showing up when i hover over the title The cover CSS link is Here: https://dl.dropboxusercontent.com/s/cns58geer8o3fav/Cover.CSS?dl=0 If someone could tell me why this is happening that would be amazing c: thanks :D Probably not using the right cover type, you need animetitle CSS |
Shishio-kun said: ZmBzRALIVE said: I'm having some problems XD http://prntscr.com/4snxoy For some reason the Cover is not showing up when i hover over the title The cover CSS link is Here: https://dl.dropboxusercontent.com/s/cns58geer8o3fav/Cover.CSS?dl=0 If someone could tell me why this is happening that would be amazing c: thanks :D Probably not using the right cover type, you need animetitle CSS ah! okay thanks c: |
Shishio-kun said: ZmBzRALIVE said: I'm having some problems XD http://prntscr.com/4snxoy For some reason the Cover is not showing up when i hover over the title The cover CSS link is Here: https://dl.dropboxusercontent.com/s/cns58geer8o3fav/Cover.CSS?dl=0 If someone could tell me why this is happening that would be amazing c: thanks :D Probably not using the right cover type, you need animetitle CSS Now that they are actually showing up XD they're showing up in the wrong place... http://prntscr.com/4spdoi i tried looking through some of the other areas before posting again xD but i didn't find anything that would work to fix this problem... any idea's? |
| This topic works again. You'll have to install the new codes from the first topic to get this effect back. |
| If you were using this topic, know that Google might have made some changes so I can no longer automatically update the anime import- so I've updated the first post with a new cover import that you should be using, its updated with all anime covers as of now. |
| How can I move the animetitle link on top of the cover when I hover instead of the left side? edit: tbody:hover .animetitle span{ position:relative; top:-151px; } Actually, I'm still having an issue: Because of the line-height, if the animetitle is more than one line, this happens. How can I fix this if the covers use the line-height? my code: edit2: I've found a way to fix it, it's not centered but at least it's way better than before: .animetitle{ white-space:nowrap!important; } So now it looks like this : |
SatiriquesMar 21, 2015 3:54 PM
 |
| I'm a bit late to the party, but I'm having some problems and I hope someone can help me. Whenever I hover above a title and the anime cover appears, the title of the anime goes across the image. Is there a way to move the title above the image or any other way to make it nicer? Thanks! |
 |
Cocas_Origin said: I'm a bit late to the party, but I'm having some problems and I hope someone can help me. Whenever I hover above a title and the anime cover appears, the title of the anime goes across the image. Is there a way to move the title above the image or any other way to make it nicer? Thanks! Yeah instead of the codes from step 2 you need to use these @import url(https://dl.dropboxusercontent.com/s/yo4mkkqp49skl69/animetitle.css); /* ROWS TRANSITION (REPLACEMENT FOR "CSS FOR CATGIRLS" IMPORT) This controls the part where pics appear on your rows. It controls the timing. You can change the numbers. The first number in each row by default is .5s, this is a half second. It controls how fast the pic window "opens". The second number is the time it takes the window to begin opening. By default its set to .1s, a tenth of a second. If you changed it to 2s, it would take two seconds for the window to open. You'll need to change all the rows timings! They change different browser's timings. */ .td1, .td2 { transition: line-height .5s ease .1s; -o-transition: line-height .5s ease .1s; -moz-transition: line-height .5s ease .1s; -webkit-transition: line-height .5s ease .1s; } /* LIST ROWS HEIGHT ON HOVER This is the height of the rows when you put your cursor on them. */ tr:hover .td1, tr:hover .td2 { } /* AIRING */ .animetitle + small { position: relative; line-height: 1px !important; } /* HEIGHT/WIDTH/POSITION OF TITLES ON HOVER Background size is the height/width of titles. Margin-right lets you move the cover's position on hover. */ #list_surround tab\le:nth-of-type(n+4) tbody:hover .animetitle { background-position: center center !important; background-repeat: no-repeat !important; background-size: 225px 320px !important; display: block !important; margin-right: 0px !important; height: 400px; } #list_surround tab\le:nth-of-type(n+4) tbody .animetitle { background-position: center center !important; background-repeat: no-repeat !important; background-size: 225px 320px !important; display: block !important; margin-right: 0px !important; height: 0px; transition: line-height .5s ease .1s; -o-transition: line-height .5s ease .1s; -moz-transition: line-height .5s ease .1s; -webkit-transition: line-height .5s ease .1s; } #list_surround tab\le:nth-of-type(n+4) tbody .animetitle{ background-position: center center !important; } /* OTHER CODES */ .td1, .td2 { line-height: 35px; } #list_surround tab\le:nth-of-type(n+4) td:nth-of-type(3), #list_surround tab\le:nth-of-type(n+4) td:nth-of-type(4), #list_surround tab\le:nth-of-type(n+4) td:nth-of-type(5), #list_surround tab\le:nth-of-type(n+4) td:nth-of-type(6), #list_surround tab\le:nth-of-type(n+4) td:nth-of-type(7), #list_surround tab\le:nth-of-type(n+4) td:nth-of-type(8) { line-height: 20px !important; } .animetitle { background-size: 0 !important; } |
| @Shishio-kun Thanks for the quick reply, though now I have another problem I can't fix... the cover appears instantly and even if I change the values on the transition, the effect is still the same... |
|
Cocas_Origin said: @Shishio-kun Thanks for the quick reply, though now I have another problem I can't fix... the cover appears instantly and even if I change the values on the transition, the effect is still the same... ok here's with the transitions on the covers @import url(https://dl.dropboxusercontent.com/s/yo4mkkqp49skl69/animetitle.css); /* ROWS TRANSITION (REPLACEMENT FOR "CSS FOR CATGIRLS" IMPORT) This controls the part where pics appear on your rows. It controls the timing. You can change the numbers. The first number in each row by default is .5s, this is a half second. It controls how fast the pic window "opens". The second number is the time it takes the window to begin opening. By default its set to .1s, a tenth of a second. If you changed it to 2s, it would take two seconds for the window to open. You'll need to change all the rows timings! They change different browser's timings. */ .td1, .td2 { } /* LIST ROWS HEIGHT ON HOVER This is the height of the rows when you put your cursor on them. */ tr:hover .td1, tr:hover .td2 { } /* AIRING */ .animetitle + small { position: relative; line-height: 1px !important; } /* HEIGHT/WIDTH/POSITION OF TITLES ON HOVER Background size is the height/width of titles. Margin-right lets you move the cover's position on hover. */ #list_surround tab\le:nth-of-type(n+4) tbody:hover .animetitle { background-position: center center !important; background-repeat: no-repeat !important; background-size: 225px 320px !important; display: block !important; margin-right: 0px !important; height: 400px; } #list_surround tab\le:nth-of-type(n+4) tbody .animetitle { background-position: center center !important; background-repeat: no-repeat !important; background-size: 225px 320px !important; display: block !important; margin-right: 0px !important; height: 0px; transition: height .5s ease .1s; -o-transition: height .5s ease .1s; -moz-transition: height .5s ease .1s; -webkit-transition: height .5s ease .1s; } #list_surround tab\le:nth-of-type(n+4) tbody .animetitle{ background-position: center center !important; } /* OTHER CODES */ .td1, .td2 { line-height: 35px; } #list_surround tab\le:nth-of-type(n+4) td:nth-of-type(3), #list_surround tab\le:nth-of-type(n+4) td:nth-of-type(4), #list_surround tab\le:nth-of-type(n+4) td:nth-of-type(5), #list_surround tab\le:nth-of-type(n+4) td:nth-of-type(6), #list_surround tab\le:nth-of-type(n+4) td:nth-of-type(7), #list_surround tab\le:nth-of-type(n+4) td:nth-of-type(8) { line-height: 20px !important; } .animetitle { background-size: 0 !important; } |
More topics from this board
» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )Shishio-kun - Apr 15, 2010 |
7924 |
by Shishio-kun
»»
5 hours ago |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1262 |
by Shishio-kun
»»
Sep 22, 4:35 AM |
|
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
382 |
by Shishio-kun
»»
Sep 22, 4:29 AM |
|
Sticky: » [ BBCODE ] All 2023 BBcodes, Guides, and Templates ( 1 2 )Shishio-kun - Feb 16, 2023 |
57 |
by Shishio-kun
»»
Sep 22, 4:27 AM |
|
Sticky: » [ SIGNATURES ~ PROFILES] All guides, generators, and templatesShishio-kun - Feb 16, 2023 |
31 |
by Shishio-kun
»»
Sep 22, 4:14 AM |