模板:栏目块.css

/* 复制于https://otomad.wiki/Template:%E5%AD%90%E6%A0%8F%E7%9B%AE.css */

.childbox-image-more::before { content: ""; opacity: 0; transition:opacity 0.2s; }

.childbox-image-more:hover::before {

   content: "了解更多";
   font-weight: bold;
   position: absolute;
   display: flex;
   font-size: 20px;
   color: black;
   width: 100%;
   height: 100%;
   justify-content: center;
   align-items: center;
   z-index: 200;
   opacity: 1;
   background-color: rgba(255,255,255,0.7);

}

.childbox-image-more { transform: scale(1); transition:all 0.2s; }

.childbox-image-more:hover { transform: scale(1.01); }

.childbox-image-more-child img { width: 100%; height: auto; }

@media (min-width: 850px) { .childbox-box { margin:10px; display:flex; font-size: 0; } .childbox-image { width:30%; border-radius:6px; overflow:hidden; /*box-shadow: 0 3px 6px rgb(0 0 0 / 20%)*/; cursor: default; align-items: center; margin:auto; } .childbox-text { width:65%; margin-left:20px; } .childbox-title { flex:1; font-weight:700; font-size:20px; margin-top:5px; } } @media (max-width: 850px) { .childbox-box { margin:10px; display:flex; flex-direction: column; font-size: 0; } .childbox-image { width:100%; border-radius:6px; overflow:hidden; /*box-shadow: 0 3px 6px rgb(0 0 0 / 20%)*/; cursor: default; align-items: center; margin:auto; } .childbox-text { width:100%; } .childbox-title { text-align:center; flex:1; font-weight:700; font-size:20px; margin-top:5px; } }