模板:栏目块.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;
	}
}