Transforming the visual presentation of your Hexo blog involves adding interactive elements and modern styling to content cards and sidebar components. This tutorial covers implementing dynamic hover states and smooth transitions through custom CSS.

Establishing Custom Styles

Create a new stylesheet in your theme's source directory: source/css/custom-theme.css. This file will contain all visual enhancements.

/* Define custom properties for consistent theming */
:root {
    --highlight-color: #3b82f6;
    --animation-duration: 0.3s;
    --border-radius: 10px;
}

/* Unified hover effect for post cards and widgets */
.recent-post-item:hover,
.card-widget:hover {
    box-shadow: 0 0 0 3px var(--highlight-color) !important;
}

Loading the Stylesheet

Modify your theme's configuration to inject the custom CSS into the documetn head:

inject:
  head:
    - <link rel="stylesheet" href="/css/custom-theme.css">

Enhancing Sidebar Interactions

Impelment fluid animations and interactive feedback for sidebar list items:

/* Base transition configuration */
#aside-content .aside-list > .aside-list-item {
    transition: background-color var(--animation-duration) ease,
                color var(--animation-duration) ease,
                border-radius var(--animation-duration) ease,
                transform 0.2s ease;
    padding: 6px !important;
}

/* Hover transformation */
.aside-list-item:hover {
    background: var(--highlight-color);
    color: #fff;
    border-radius: var(--border-radius);
    transform: scale(1.03);
}

/* Text color override on hover */
.aside-list-item:hover a.title,
.aside-list-item:hover time {
    color: #fff !important;
}

Rounded Image Corners

Apply uniform border radius to all images across the site:

img {
    border-radius: 12px;
}

Complete Style Implementation

Consolidated CSS for direct implementation:

/* Hexo Theme Customization - Complete Styles */
:root {
    --highlight-color: #3b82f6;
    --animation-duration: 0.3s;
    --border-radius: 10px;
}

/* Card hover enhancements */
.recent-post-item:hover,
.card-widget.card-info:hover,
.card-widget.card-announcement:hover,
.card-widget.card-recent-post:hover,
.card-widget.card-categories:hover,
.card-widget.card-tags:hover,
.card-widget.card-archives:hover,
.card-widget.card-webinfo:hover {
    box-shadow: 0 0 0 3px var(--highlight-color) !important;
}

/* Sidebar item transitions */
#aside-content .aside-list > .aside-list-item {
    transition: background-color var(--animation-duration) ease,
                color var(--animation-duration) ease,
                border-radius var(--animation-duration) ease,
                transform 0.2s ease;
    padding: 6px !important;
}

/* Sidebar hover states */
.aside-list-item:hover {
    background: var(--highlight-color);
    color: #fff;
    border-radius: var(--border-radius);
    transform: scale(1.03);
}

.aside-list-item:hover a.title,
.aside-list-item:hover time {
    color: #fff !important;
}

/* Global image styling */
img {
    border-radius: 12px;
}

Build and Deployment

Execute these commands to apply changes:

hexo clean
hexo generate
hexo deploy
hexo server