css 有点菜鸟：我尝试添加一个图像到这张卡，并保持悬停功能，但无法找到一种方法来做到这一点

disho6za 于 2023-02-10 发布在其他

关注(0)|答案(1)|浏览(109)

我目前正在做一个形象画廊，但我不喜欢目前的设计。
我期待使用一个现代卡来显示图像，悬停时，显示链接到该图像的文本（无论是透明或暗背景）。
每一个方法，我尝试，图像只是取代了黑暗的背景和悬停不工作了。
CSS：

.card {
-background: linear-gradient(to left, #f7ba2b 0%, #ea5358 100%);
width: 190px;
height: 254px;
padding: 5px;
border-radius: 1rem;
overflow: visible;
background: #f7ba2b;
background: var(--background);
position: relative;
z-index: 1;
}

.card::after {
position: absolute;
content: "";
top: 30px;
left: 0;
right: 0;
z-index: -1;
height: 100%;
width: 100%;
transform: scale(0.8);
filter: blur(25px);
background: #f7ba2b;
background: var(--background);
transition: opacity .5s;
}

.card-info {
\--color: #181818;
background: var(--color);
color: var(--color);
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
overflow: visible;
border-radius: .7rem;
}

.card .title {
font-weight: bold;
letter-spacing: .1em;
}

/*Hover*/
.card:hover::after {
opacity: 0;
}

.card:hover .card-info {
color: #f7ba2b;
transition: color 1s;
}

网址：

<div class="card">
  <div class="card-info">
    <p class="title">Magic Card</p>
  </div>
</div>

从这个网站：https://uiverse.io/alexruix/heavy-elephant-39
在div之间添加一个in并调整一些css
我想插入的图像与边界是不重叠的图像，因为我想看到它的100%。同时能够悬停，看到每个自定义文本。

css

来源：https://stackoverflow.com/questions/75356118/kinda-noobie-im-trying-to-add-an-image-to-this-card-and-keep-the-hover-functi

1条答案

按热度按时间

e5nqia271#

我想这就是你的意思。@edit我从background-size更改：190像素× 254像素;到背景大小：180像素× 244像素;

.card {
 --background: linear-gradient(to left, #f7ba2b 0%, #ea5358 100%);
 width: 190px;
 height: 254px;
 padding: 5px;
 border-radius: 1rem;
 overflow: visible;
 background: #f7ba2b;
 background: var(--background);
 position: relative;
 z-index: 1;
}

.card::after {
 position: absolute;
 content: "";
 top: 30px;
 left: 0;
 right: 0;
 z-index: -1;
 height: 100%;
 width: 100%;
 transform: scale(0.8);
 filter: blur(25px);
 background: #f7ba2b;
 background: var(--background);
 transition: opacity .5s;
}

.card-info {
 --color: #181818;
 background: var(--color);
background-image: url('https://images.pexels.com/photos/337909/pexels-photo-337909.jpeg?auto=compress&cs=tinysrgb&w=1600');
background-size: 180px 244px;
background-repeat: no-repeat;
background-position-x: center;
background-position-y: center;
 color: var(--color);
 display: flex;
 justify-content: center;
 align-items: center;
 width: 100%;
 height: 100%;
 overflow: visible;
 border-radius: .7rem;
}

.card .title {
 font-weight: bold;
 letter-spacing: .1em;
 opacity:0;
}

/*Hover*/
.card:hover::after {
 opacity: 0;
}

.card:hover .title {
 color: #f7ba2b;
 transition: color 1s, opacity 1s;
 opacity:1;
}

<div class="card">
  <div class="card-info">
    <p class="title">Magic Card</p>
  </div>
</div>

赞(0）回复(0）举报 2023-02-10

我来回答

css 有点菜鸟：我尝试添加一个图像到这张卡，并保持悬停功能，但无法找到一种方法来做到这一点

1条答案

相关问题

热门标签

最新问答