Magento – How to display category image in home page with custom css

You need to create your own block, or at least one template.
Here is the short version using only a template.
Create the file app/design/frontend/base/default/template/homepage/categories.phtml with this content:

<?php
$rootId = Mage::app()->getStore()->getRootCategoryId();
$categories = Mage::getModel('catalog/category')->getCollection()
    ->addAttributeToSelect('*')
    ->addAttributeToFilter('parent_id', $rootId)
    ->setOrder('position')
    ->addAttributeToFilter('include_in_menu', 1) //this is needed if you want only the categories in the menu
    ->addAttributeToFilter('is_active', 1);

$_helper = $this->helper('catalog/output'); 
?>
<?php if ($categories->count() > 0) : ?>
<ul>
    <?php foreach ($categories as $category) : ?>
       <li>
           <div class="name">
              <a href="<?php echo $category->getUrl()?>" title="<?php echo $this->escapeHtml($category->getName())?>"><?php echo $category->getName()?></a>
           </div>
           <div class="image">
               <?php if ($category->getImageUrl()) :?>
                   <img src="<?php echo $category->getImageUrl()?>" alt="<?php echo $this->escapeHtml($category->getName())?>" />
               <?php endif;?>
           </div>
           <div class="description">
               <?php echo $_helper->categoryAttribute($category, $category->getDescription(), 'description') ?>
           </div>
       </li>
    <?php endforeach;?>
</ul>
<?php endif;?>

Now you need to add this to the homepage content:

{{block type="core/template" template="homepage/categories.phtml"}}

The markup of the template may need some modifications in order to make it a slider, but all the elements you need are there.

There is a cleaner method where you create you own block and move the code that retrieves the categories to a block method and call that method in the template. But the idea is the same.

I haven't tested the code so be careful at syntax errors.

You could do something like this. Add a custom catalog/homecategories.phtml file and add it in your local.xml.

homecategories.phtml

$helper = Mage::helper('catalog/category');
/** @var $helper Mage_Catalog_Helper_Category */

$topCategories = $helper->getStoreCategories(true);
?>

<?php if (!empty($topCategories)): ?>
    <div class="home-categories">

        <ul class="level-1">
            <?php foreach ($topCategories as $topCategory): ?>
                <?php /** @var $topCategory \Mage_Catalog_Model_Category */ ?>
                <li>
                    <a href="<?php echo $helper->getCategoryUrl($topCategory); ?>"><?php echo $topCategory->getName(); ?></a>

                    <?php if ($topCategory->hasChildren()): ?>
                        <ul class="level-2">
                            <?php foreach ($topCategory->getCategories($topCategory, 0, true) as $category): ?>
                                <?php /** @var $category \Mage_Catalog_Model_Category */ ?>
                                <li>
                                    <a href="<?php echo $helper->getCategoryUrl($category); ?>"><?php echo $category->getName(); ?></a>
                                    <a href="<?php echo $helper->getCategoryUrl($category); ?>">
                                        <img src="<?php echo $category->getImageUrl();?>" alt="" />
                                    </a>
                                </li>
                            <?php endforeach; ?>
                        </ul>
                    <?php endif; ?>
                </li>
            <?php endforeach; ?>
        </ul>

    </div>
<?php endif; ?>

<?php

local.xml

<cms_index_index>
    <reference name="content">
        <block type="core/template" name="home-categories" as="home_categories" before="-">
            <action method="setTemplate"><template>catalog/homecategories.phtml</template></action>
        </block>
    </reference>
</cms_index_index>