CSS文件在Jekyll站點上無法正常工作

Question

我正在嘗試創建一個基於Jekyll的網站，該網站託管在GitHub上。我是RoR和Jekyll的初學者。似乎有一些實施網站的CSS問題：在原來的主題放大鏡玻璃應該在後圖像。在我的實施中，放大鏡玻璃分離並出現在帖子縮略圖的左上角上方。此外，單擊帖子時打開的模式對話框不同：它不是全屏，右上角的十字也不存在。

原來的主題：

• 演示：https://jeromelachaud.github.io/freelancer-theme/
• 來源：https://github.com/jeromelachaud/freelancer-theme/

我的實現：

• 演示：https://mrcsabatoth.github.io/
• 來源：https://github.com/MrCsabaToth/mrcsabatoth.github.io/

正如我奉命爲主題的回購協議，我開始與主題的主要分支。這具有所有配置yaml設置和適當的變量分辨率（站點基址除外）。

我在做什麼錯？

Answer 1

您的演示缺少這個CSS代碼

#programs .caption:hover { 
    opacity: 1; 
} 
#programs .caption { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    opacity: 0; 
    background: rgba(24,188,156,.9); 
    -webkit-transition: all ease .5s; 
    -moz-transition: all ease .5s; 
    transition: all ease .5s; 
} 
#programs * { 
    z-index: 2; 
} 
#programs .program-link { 
    display: block; 
    position: relative; 
    margin: 0 auto; 
    max-width: 400px; 
} 
#programs .program-link .caption .caption-content { 
    position: absolute; 
    top: 50%; 
    width: 100%; 
    height: 20px; 
    margin-top: -12px; 
    text-align: center; 
    font-size: 20px; 
    color: #fff; 
} 

這個代碼是存在於原始演示負責顯示懸停

的標題，但不同的是您正在使用#programs而在原來的css使用#portfolio