/*
color palette
dark blue-gray: #607d8b
salmon: #ff799c
lavender: #aabee0
*/
body { /* this is a selector for <body> element (within the HTML file). Curly brackets for opening and closing. */
background-image: url('background.jpg');
background-repeat: no-repeat;
background-size: cover;
}
#wrapper { /* when we select elements with ID attribute, we use # symbol at the beginning. */
width: 1600px;
height: auto; /* this is temporary */
background-color: rgba(255,255,255,0.95); /* Red, Green, Blue and Opacity values. */
margin: 30px auto; /* centering the wrapper. 1st value is margin-top and it follows clockwise as top-right-bottom-left. */
border-radius: 6px; /* Rounding the corners */
box-shadow: 0 16px 32px rgba(0,0,0,0.3); /* drop-shadow */
}
header {
width: 100%;
height: 678px;
background-image: url('https://i.imgur.com/tjeCjbI.png');
background-size: cover;
}
#herotext {
float: left;
margin-left: 10%;
margin-top: 10%;
}
h1 {
font-family: 'Montserrat-Extralight';
font-weight: 300;
color: #a92654;
font-size: 34px;
line-height: 46px;
}
.salmon {
font-family: 'Montserrat-Bold';
color: #a92654;
}
.lavender {
font-family: 'Montserrat-Medium';
color: #998a8f;
}
main {
float: left; /* in a float layout, main sections should float */
}
.card {
width: 22.5%;
height: auto;
float: left;
margin-left: 2%;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 10px 20px rgba(0,0,0,0.3); /* initial state */
transition: box-shadow .3s;
}
.card:hover {
box-shadow: 0 25px 50px rgba(0,0,0,0.3); /* pointer is on the card */
}
.card img { /* it is only targeting the images within the cards */
width:100%;
border-radius: 4px 4px 0 0;
}
.static {
position:absolute;
background: white;
}
.static:hover {
opacity:0;
}
h2 {
font-family: 'Roboto';
font-weight: 300;
font-size: 28px;
color: rgba(0,0,0,0.54);
text-align: center;
margin-top: 24px;
}
h3 {
font-family: 'Roboto';
font-weight: 300;
font-size: 28px;
color: #ff799c; /* salmon */
margin: 12px 0 12px 16px;
}
h4 {
font-family: 'Roboto';
font-weight: 400;
font-size: 14px;
color: #aabee0; /*lavender */
line-height: 20px;
margin: 12px 0 12px 16px;
}
p {
font-family: 'Roboto';
font-weight: 300;
font-size: 14px;
color: rgba(0,0,0,0.87); /*lavender */
line-height: 20px;
margin: 12px 12px 16px 16px;
}<!DOCTYPE html>
<head> <!-- Head contains items that are read by the Browser, and also by Search Engines, but they are hidden from the viewer; they are not directly rendered. -->
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
</head> <!-- closing tag -->
<body> <!-- Body contains all the visible elements, possible to use as a background -->
<div id="wrapper"> <!-- div defines an area -->
<header>
<div id="herotext">
<h1>
<!-- span is for exceptions in text --> <span class="salmon">DIGITAL
ART</span><br />
<span class="lavender">Fine Art<br />
Conference</span><br />
APRIL 26-28, 2019<br />
BILKENT, ANKARA
</h1>
</div>
</header>
<main>
<h2>SPEAKERS</h2>
<div class="card">
<img class="static"
src="https://i.imgur.com/jr2AoEe.jpg">
<img class="active"
src="https://i.imgur.com/L9K5eeh.gif" />
<h3>Yağmur<br /> Başgül</h3>
<h4>Dexter Sinister<br />
<br />
Serving Library</h4>
<p>David is an independent graphic designer, writer and teacher in New York City. His talk and the accompanying workshop revolves around the relationship between interfaces and the concept of time.</p>
</div>
<div class="card">
<img src="https://i.imgur.com/ZuZtSPL.jpg" />
<h3>Alice<br /> Rawsthorn</h3>
<h4>alicerawsthorn.com<br />
New York Times<br />
Frieze Magazine</h4>
<p>Alice is a design critic and author of several books on design. She will give a talk on our constantly changing perceptions of what constitutes good and bad design, and how they are likely to evolve in the future.</p>
</div>
<div class="card">
<img src="https://i.imgur.com/Lp8c3ib.jpg" />
<h3>Kimon<br /> Keramidas</h3>
<h4>kimonkeramidas.com<br />
Draper Interdisciplinary<br /> Master's Program at NYU</h4>
<p>Kimon is a digital media theorist and historian. He will talk about the history of interfaces through tactile and interactive displays that will stimulate new questions about how we interact with and use computers.</p>
</div>
<div class="card">
<img src="https://i.imgur.com/eKAH6gX.jpg" />
<h3>Rob<br /> Giampietro</h3>
<h4>linedandunlined.com<br />
Material Design<br />
RISD MFA Graphic Design</h4>
<p>From 2015 - 2017 Rob was the Creative Lead for Google's Material Design studio in New York. He will take us through the different uses of metaphors in design, particularly within the process of designing interfaces.</p>
</div>
</main>
</div>
</body>
</html>
我正在尝试将鼠标悬停在卡上时会播放gif的鼠标悬停/悬停卡。因此，基本思想是，当有人徘徊时，图像会变成gif。
基本问题是未悬停时图像太大，因此无法分页。我希望像其他卡片边框一样在卡片边框之间，但我无法自行解决。
我是编码的新手，如果这是一个愚蠢的事情，对不起
/*
color palette
dark blue-gray: #607d8b
salmon: #ff799c
lavender: #aabee0
*/
body { /* this is a selector for <body> element (within the HTML file). Curly brackets for opening and closing. */
background-image: url('background.jpg');
background-repeat: no-repeat;
background-size: cover;
}
#wrapper { /* when we select elements with ID attribute, we use # symbol at the beginning. */
width: 1600px;
height: auto; /* this is temporary */
background-color: rgba(255,255,255,0.95); /* Red, Green, Blue and Opacity values. */
margin: 30px auto; /* centering the wrapper. 1st value is margin-top and it follows clockwise as top-right-bottom-left. */
border-radius: 6px; /* Rounding the corners */
box-shadow: 0 16px 32px rgba(0,0,0,0.3); /* drop-shadow */
}
header {
width: 100%;
height: 678px;
background-image: url('heroimg2.png');
background-size: cover;
}
#herotext {
float: left;
margin-left: 10%;
margin-top: 10%;
}
h1 {
font-family: 'Montserrat-Extralight';
font-weight: 300;
color: #a92654;
font-size: 34px;
line-height: 46px;
}
.salmon {
font-family: 'Montserrat-Bold';
color: #a92654;
}
.lavender {
font-family: 'Montserrat-Medium';
color: #998a8f;
}
main {
float: left; /* in a float layout, main sections should float */
}
.card {
width: 22.5%;
height: auto;
float: left;
margin-left: 2%;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 10px 20px rgba(0,0,0,0.3); /* initial state */
transition: box-shadow .3s;
}
.card:hover {
box-shadow: 0 25px 50px rgba(0,0,0,0.3); /* pointer is on the card */
}
.card img { /* it is only targeting the images within the cards */
width:100%;
border-radius: 4px 4px 0 0;
}
.static {
position:static;
background: white;
}
.static:hover {
opacity:0;
}
<style>
.speaker1_1 {
height:300px;
width:345px;
margin:auto;
}
h2 {
font-family: 'Roboto';
font-weight: 300;
font-size: 28px;
color: rgba(0,0,0,0.54);
text-align: center;
margin-top: 24px;
}
h3 {
font-family: 'Roboto';
font-weight: 300;
font-size: 28px;
color: #ff799c; /* salmon */
margin: 12px 0 12px 16px;
}
h4 {
font-family: 'Roboto';
font-weight: 400;
font-size: 14px;
color: #aabee0; /*lavender */
line-height: 20px;
margin: 12px 0 12px 16px;
}
p {
font-family: 'Roboto';
font-weight: 300;
font-size: 14px;
color: rgba(0,0,0,0.87); /*lavender */
line-height: 20px;
margin: 12px 12px 16px 16px;
}<!DOCTYPE html>
<head> <!-- Head contains items that are read by the Browser, and also by Search Engines, but they are hidden from the viewer; they are not directly rendered. -->
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
</head> <!-- closing tag -->
<body> <!-- Body contains all the visible elements, possible to use as a background -->
<div id="wrapper"> <!-- div defines an area -->
<header>
<div id="herotext">
<h1>
<!-- span is for exceptions in text --> <span class="salmon">DIGITAL
ART</span><br />
<span class="lavender">Fine Art<br />
Conference</span><br />
APRIL 26-28, 2019<br />
BILKENT, ANKARA
</h1>
</div>
</header>
<main>
<h2>SPEAKERS</h2>
<div class="card">
<img class="static"
src="images/speaker1_1.png">
<img class="active"
src="images/speaker1.gif" />
<h3>Yağmur<br /> Başgül</h3>
<h4>Dexter Sinister<br />
<br />
Serving Library</h4>
<p>David is an independent graphic designer, writer and teacher in New York City. His talk and the accompanying workshop revolves around the relationship between interfaces and the concept of time.</p>
</div>
<div class="card">
<img src="images/pinkguy.jpg" />
<h3>Alice<br /> Rawsthorn</h3>
<h4>alicerawsthorn.com<br />
New York Times<br />
Frieze Magazine</h4>
<p>Alice is a design critic and author of several books on design. She will give a talk on our constantly changing perceptions of what constitutes good and bad design, and how they are likely to evolve in the future.</p>
</div>
<div class="card">
<img src="images/taner.jpg" />
<h3>Kimon<br /> Keramidas</h3>
<h4>kimonkeramidas.com<br />
Draper Interdisciplinary<br /> Master's Program at NYU</h4>
<p>Kimon is a digital media theorist and historian. He will talk about the history of interfaces through tactile and interactive displays that will stimulate new questions about how we interact with and use computers.</p>
</div>
<div class="card">
<img src="images/jordi.jpg" />
<h3>Rob<br /> Giampietro</h3>
<h4>linedandunlined.com<br />
Material Design<br />
RISD MFA Graphic Design</h4>
<p>From 2015 - 2017 Rob was the Creative Lead for Google's Material Design studio in New York. He will take us through the different uses of metaphors in design, particularly within the process of designing interfaces.</p>
</div>
</main>
</div>
</body>
</html>
答案 0 :(得分：0)
将position: relative;添加到.card的CSS中。这样可以解决巨大图像的问题。
说明：
当您将.static声明为position:absolute时，img class="static"将从页面流中删除，因此它不会自动绑定到<div class="card">的宽度。没有position: relative;的父元素，css .card img { width:100%; }会使图像占据<body>的100％宽度！
改进的想法：为什么不将.jpg图像用作不同卡的背景图像？