css - 调整卡片上图像和内容的大小

Question

我正在使用 materializecss 框架试验一些效果。我试图在用户将鼠标悬停在卡片上时调整图像和内容的大小，但似乎无法破解它。

.card:hover .card-image {
    height: 50%;
}

.card:hover .card-content {
    height: 50%;
}

<div class="row">
    <div class="col s12 m7">
        <div class="card">
            <div class="card-image">
                <img src="http://lorempixel.com/640/480/nightlife/">
                <span class="card-title">Card Title</span>
            </div>
            <div class="card-content">
               <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
            </div>
        </div>
    </div>
</div>

不幸的是，我就是无法让它工作。我已将高度更改应用于 img、卡片内容中的元素、卡片类等，但似乎没有任何效果。

Answer 1

试试这个:

.card:hover .card-image img {
    width: 50%;
}

滚动页面的高度很棘手，你可能想点击图像，而不是 div，除非你还设置了 ovrflow: hidden 如果你想裁剪图像？由于 .card.content 不确定您要实现的目标.. 也许 font-size: 50%?

高度和宽度百分比是相对于父元素的，而不是应用样式的元素。所以宽度为 50% 的图像是其父元素宽度的 50%，而不是源文件的宽度。 .如果我没记错的话。

DEMO