This is a cover style I came across on accident that uses the animetitle:before cover CSS import. You keep your more button with this one. It stacks your covers on the side of the list and slides your covers out after a second of pointing to a row. It would be good to combine with these row hover highlights after: http://myanimelist.net/forum/?topicid=565111
Step One: Add one of these imports to the top of your CSS, make sure you copy the one that matches your list type (anime of manga). Its a default cover CSS that loads many anime or manga covers for your list. Make sure you remove any old cover CSS imports from your list too. It might not have all the covers for your list. If you want to have all the covers match your list the you need to use a generator to produce a cover CSS specifically for your list (see below).
Step two: Click this link and add the codes it takes you to the bottom of your CSS, then save. If you followed the steps correctly you should see the trick in effect. If not see below for common solutions, or ask in this topic.
You can control the size with the padding codes. Margin left and top under .animetitle:hover:before controls the position of the cover. Increase or decrease the amount after transition to control the timing of the zoom. By default its set to 0.4 seconds.
What to do if some but not all, of your title pics don't show up
If only some of your titles were customized, then the animetitle before CSS links didn't have all the titles on your list. You can either manually update the missing ones, or you'll need to make a animetitle before CSS for your list with a generator and make an import link from it for your own list. See my tutorial for more info: http://myanimelist.net/forum/?topicid=443333
If none of your titles are customized, or the covers suddenly disappear
There's a possibility your CSS had (or you added) a code thats blocking or conflicting the ones you entered. Make sure there aren't any codes without closing brackets before the codes you put in from step 2 and 3, and make sure there aren't any leftover links or text at the bottom that wasn't part of the code (they may start with "Read more at...") If you made changes recently and the covers were suddenly gone, then try to undo the changes and see if it brings the covers back.
Double check you pasted the entire import link and that you have the Hide code in your CSS.
If those tips don't bring the covers back, then the import link probably no longer works. If you're sure you entered everything right, use a cover generator to make an import (replacing the import from step 1): https://myanimelist.net/forum/?topicid=443333
The type of import you want is animetitle:before.
/*
BACKGROUND IMAGE
This is the main background image for the whole page.
Change the image link to the background you want!
If you're not seeing a background, make sure you are copied the
entire CSS code or added any new background image codes correctly.
Also your image link may be broken, try uploading a new background then!
*/
/*
LIST WIDTH
Use this to increase the width of your list!
*/
#list_surround {
width:400px;
}
/*
REPOSITION MAIN BACKGROUND
Change the position your background starts on your screen from with the two properties after "background-position" below.
You replace 'center' and '43%' with two other properties, they can be any of the following: left, top, bottom, right, or center.
So if you want your background to start from the center of the screen, use "center center" after background-position in the code below, replacing "center 43%".
If you want it to start from the top and left, use "top left"
If you want it to start from the top and center, use "top center".
If you want it to start from the right and top, use "right top"
If you want it to start from the right and bottom, use "right bottom"
and so forth...
Additionally, you can change "left" to a % to determine how far left or right the background starts from. For example "30% top" will start the background from the top but 30% of the pic's width from the left of the layout. You can also change top to a % to change the amount you want to start it from the top or bottom.
*/
body{
background-position: top center 50%;}
/*OTHER CODES
Important codes for the layout's setup. Don't mess with these unless you know exactly what you're doing. If you want to customize more on the page, use the link at the top of this CSS, or ask in my club!
*/
/*
REPOSITION MAIN BACKGROUND
Change the position your background starts on your screen from with the two properties after "background-position" below.
For example, the default code starts it from the left and top corner of the screen. You change 'left' and 'top' other properties, they can be any of the following: left, top, bottom, right, or center.
So if you want your background to start from the center of the screen, use "center center".
If you want it to start from the top and center, use "top center".
If you want it to start from the right and top, use "right top"
If you want it to start from the right and bottom, use "right bottom"
and so forth...
Additionally, you can change "left" to a % to determine how far left or right the background starts from. For example "30% top" will start the background from the top but 30% of the pic's width from the left of the layout. You can also change top to a % to change the amount you want to start it from the top or bottom.
*/
body{
background-position: left top;
background-size: auto !important;
}
#list_surround {
position: absolute !important;
left: 1px !important;}
/*LIST OPACITY
The amount of opacity (between .01 and .99) determines how see-thru it is. .01 is almost completely clear. .99 is almost completely opaque. You can choose any number between .01 and .99 to find your desired settings.
*/
/* MINIMIZED LIST
Right and top control the position of the on the page. The percentage after is how far the list goes across the page from the right or top of the page. For example, right: 50%; moves the list 50% across the page from the right. You can change "right" to "left" to position it from the right instead of the left. Width and height control the width and height of your list, keep it smaller than your screen so the stays minimal.
*/
#{
background: url(none) !important;
}
/*
REPOSITION MAIN BACKGROUND
Change the position your background starts on your screen from with the two properties after "background-position" below.
For example, the default code starts it from the left and top corner of the screen. You change 'left' and 'top' other properties, they can be any of the following: left, top, bottom, right, or center.
So if you want your background to start from the center of the screen, use "center center".
If you want it to start from the top and center, use "top center".
If you want it to start from the right and top, use "right top"
If you want it to start from the right and bottom, use "right bottom"
and so forth...
Additionally, you can change "left" to a % to determine how far left or right the background starts from. For example "30% top" will start the background from the top but 30% of the pic's width from the left of the layout. You can also change top to a % to change the amount you want to start it from the top or bottom.
*/
body{
background-position: left bottom 170%;
background-size: auto !important;
}
/*
Anime List only
CURRENTLY WATCHING HEADER
This is the header above currently watching/reading. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list.
If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:".
*/
.header_cw {
background-image:url(http://images.cooltext.com/4180788.png);
height: 200px;
margin-bottom: -125px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}
/*
COMPLETED HEADER
This is the header above your anime/manga that's completed. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list.
If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:".
*/
.header_completed {
background-image:url(http://images.cooltext.com/4180789.png);
height: 200px;
margin-bottom: -125px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}
/*
ON-HOLD HEADER
This is the header above your animes/mangas on-hold. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list.
If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:".
*/
.header_onhold {
background-image:url(http://i56.tinypic.com/j7gs3b.jpg);
height: 200px;
margin-bottom: 0px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}
/*
DROPPED HEADER
This is the header above your dropped animes/mangas. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list.
If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:".
*/
.header_dropped {
background-image:url(http://images.cooltext.com/4180794.png);
height: 200px;
margin-bottom: -125px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}
/*
PLAN TO WATCH HEADER
This is the header above the anime/manga you plan to see or read on your list. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list.
If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:".
*/
.header_ptw {
background-image:url(http://images.cooltext.com/4180796.png);
height: 200px;
margin-bottom: -125px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}
/*
REMOVE HEADER COLOR
You need this code to remove the default background colors from the header and override any related codes. You're supposed to use your own images or the default ones for the header, so this color is set to transparent so it won't get in the way. If you want the color back for some reason, remove this section.
*/
.header_title {
background-color: transparent !important;
}
/*
OTHER CODES
Stuff I had to add after site changes. You need this otherwise the headers won't be visible.
*/
tbody
{background-color: transparent;
background-image: none;}
/*
REMOVE HEADER TEXT
These codes remove the original text like "Completed" and "Currently Watching" from
each category on the list. Some people will want the text gone so they can have their own custom logos. But if you want the text back, you have to remove this whole section. It shouldn't affect the images in any way.
*/
.header_title {
color: gray !important;
color: transparent !important;
font-size: 1px !important;
font-size: 0px !important;
font-size: 0 !important;
font-size: 0pt !important;
}
#list_surround {
left: 750px !important;
margin: inherit !important;
position: absolute !important;
}
/*
COLOR OF THE ICONS
Change the color, and adjust the opacity for brighter color.
Remove the display: none to match the selected icon to the other icons.
*/
#mal_cs_listinfo:before, #mal_cs_links:before,
#mal_cs_otherlinks:before, #mal_cs_powered:before {
background: transparent;
opacity: .9;
}
/*
BORDER OF ICONS
If you're having trouble seeing the border bottom, lower the height by a pixel or two until you see it.
/*
BUTTONS COLOR AND BORDER
Buttons within the hover menus, not the icons themselves.
Second code is for button color on hover.
*/
#mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a img{
background-color: rgba(64, 60, 90, 0.6) !important;
border-color: transparent;
border-style: solid !important;
border-width: 1px !important;
}
/*
COLOR OF HOVER MENUS AND SELECTED ICONS
Remove display none from the second code to match the colors of the selected icon to the icons above.
*/
#mal_cs_listinfo div, #mal_cs_links div, #mal_cs_otherlinks div,
#mal_cs_powered div, #mal_cs_powered dd, #mal_cs_powered a {
background-color: rgba(255, 255, 255, 0.6) !important;
}
/*
COLOR OF USERNAME (for visitors)
You don't see this username on the menus when you're logged in, log out to see it.
*/
#mal_cs_otherlinks strong a {
color: #333333 !important;
}
/*
POSITION OF TOP BAR
Change to absolute if you want it to not scroll with the page.
*/
#
{
position: fixed !important;
background-color: transparent !important;
background-image: url(none) !important;
}
/*
OTHER CODES
If you want to change out the icon images themselves, you can scroll down through the codes and find the background images and change them with your own.
*/
/*************************************************
* AFTER-LIST MARGIN
* -----------------------------------------------
* Due to fixed positioning of this it may happen
* that your copyright is covered by the menu.
* I therefore added this little offset to add
* some empty space after your list. It may not
* work even this way or might be unnecessary for
* your layout. Contact me if any issues arise
*************************************************/
#list_surround {
margin-bottom : 57px;
}
/*************************************************
* HANDLE COLOR
* -----------------------------------------------
* Background and border of the handle
*************************************************/
/*************************************************
* HANDLE WIDTH
* -----------------------------------------------
* I'm using 1000px. And it has to be replaced in
* both of these to also affect positioning.
*************************************************/
/*************************************************
* HEADINGS TEXT
* -----------------------------------------------
* This changes text that appears in bubbles on
* hovering the button. There wasn't a way I
* could re-use existing code so I had to dup it
* in my CSS. More flexibility, anyways
*************************************************/
/*************************************************
* HEADINGS THEME
* -----------------------------------------------
* Colors to use for bubbles. I suggest trying out
* black, and if it blends too much, use white.
* The border code just *has* to be here to work.
* It doesn't need to be changed. It's for small
* triangles under the rounded box.
*************************************************/
/*************************************************
* ORB ICONS, COLORS, TRANSITIONS
* -----------------------------------------------
* Orbs use images as masks, the color transition
* is actually the background-color switching, not
* the image swapping, cuz due to standards it can
* not be animated.
*************************************************/
/* Clicked and current color */
#list_surround table:first-of-type[align] td:not(fucked) a:active, .status_selected a {
background-color : hsl(110, 100%, 40%) !important;
}
/* Color transition */
#list_surround table:first-of-type[align] td:not(fucked) a {
transition : background-color .4s linear;
}
/*************************************************
* ORBS POSITION
* -----------------------------------------------
* This needs to be changed if your list has
* all anime category disabled
*************************************************/
/* OPTION: SIX CATEGORY BUTTONS */
#list_surround table:first-of-type[align] {
margin-left : -158px;
}
/* OPTION: FIVE CATEGORY BUTTONS *
#list_surround table:first-of-type[align] {
margin-left : -132px;
}
/* END OPTIONS */
/*************************************************
* BASIC CODE
* -----------------------------------------------
* This is the rest codes that I didn't categorize
* Feel free to tweak it to your liking.
*************************************************/
/*
SHUFFLE STYLE COVERS
The first box shadow is the lighting around the covers.
The first margin left/top and padding right/top below are the default position of the covers.
*/
.animetitle:before {
background-color: transparent;
background-repeat: no-repeat no-repeat;
background-size: cover;
border-radius: 7px;
box-shadow: 0px 0px 8px 8px rgba(63, 52, 60, 0.55);
content: "";
position: absolute;
z-index: 1;
}
/*
SETTINGS FOR SPACE WHERE COVERS LEAVE
You want the padding and margin to match the settings in the before section above so that
when you hover over the covers themselves, they don't flicker.
*/
.animetitle:after {
background-color: transparent;
background-repeat: no-repeat no-repeat;
background-size: cover;
border-radius: 7px;
content: "";
left: 30px ! important;
margin-top: -5px;
padding-right: 150px;
padding-top: 220px ! important;
position: absolute;
z-index: 1;
}
You didn't copy whole code it seems. Or accidentally deleted it. Or MAL ditched on you and cut your code. Anyways, it's missing the piece from Shishio's code where it says "ON HOVER SETTINGS". Try re-adding it
