.movie-list{display:flex;flex-wrap:wrap}.movie img{width:100%;height:auto;transition:transform 0.3s ease,filter 0.3s ease;filter:grayscale(60%);transition:1s}.movie:hover img{filter:blur(5px);transition:1s}.movie:hover::after{content:attr(data-title) " (" attr(data-year) ")\A" attr(data-my-rating) "\A" attr(data-comment) "\A" attr(data-date);position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;white-space:pre-wrap;padding:20px;box-sizing:border-box;line-height:1.5}.movie:hover .movie-title{font-size:16px;font-weight:bold}.movie:hover .movie-comment{font-size:12px;font-weight:normal}.douban #movies{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;padding:0px}.douban .movie{position:relative;overflow:hidden;border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,0.1);transition:transform 0.3s,box-shadow 0.3s}.douban .movie:hover{box-shadow:0 8px 16px rgba(0,0,0,0.2)}@media (max-width:768px){.douban #movies{display:grid;grid-template-columns:repeat(auto-fill,minmax(45%,1fr));gap:10px;padding:0px}}