基本上,我正在尝试创建一种具有悬停效果的幻灯片显示,以在图像上显示标题。我已经制作了幻灯片,但是无法产生悬停效果。我希望在用户将鼠标悬停在幻灯片中的图像上时放置鼠标悬停效果,并希望它尽可能淡入。用户将鼠标悬停在图像上后,我还希望在图像中间添加一个小的文字标题。我怎样才能做到这一点?任何帮助,将不胜感激。谢谢。这是我的代码。
body{
margin: 0;
padding: 0;
background: #34495e;
}
.slidershow{
width: 700px;
height: 400px;
overflow: hidden;
}
.middle{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.navigation{
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.bar{
width: 50px;
height: 10px;
border: 2px solid #fff;
margin: 6px;
cursor: pointer;
transition: 0.4s;
}
.bar:hover{
background: #fff;
}
input[name="r"]{
position: absolute;
visibility: hidden;
}
.slides{
width: 500%;
height: 100%;
display: flex;
}
.slide{
width: 20%;
transition: 0.6s;
}
.slide img{
width: 100%;
height: 100%;
}
#r1:checked ~ .s1{
margin-left: 0;
}
#r2:checked ~ .s1{
margin-left: -20%;
}
#r3:checked ~ .s1{
margin-left: -40%;
}
#r4:checked ~ .s1{
margin-left: -60%;
}
#r5:checked ~ .s1{
margin-left: -80%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="slidershow middle">
<div class="slides">
<input type="radio" name="r" id="r1" checked>
<input type="radio" name="r" id="r2">
<input type="radio" name="r" id="r3">
<input type="radio" name="r" id="r4">
<input type="radio" name="r" id="r5">
<div class="slide s1">
<img src = "https://e2k9ube.cloudimg.io/s/cdn/x/https://edienet.s3.amazonaws.com/news/images/full_40419.jpg?v=15/06/2020%2016:52:00">
</div>
<div class="slide">
<img src = "https://e2k9ube.cloudimg.io/s/cdn/x/https://edienet.s3.amazonaws.com/news/images/full_40419.jpg?v=15/06/2020%2016:52:00">
</div>
<div class="slide">
<img src = "https://e2k9ube.cloudimg.io/s/cdn/x/https://edienet.s3.amazonaws.com/news/images/full_40419.jpg?v=15/06/2020%2016:52:00">
</div>
<div class="slide">
<img src = "https://e2k9ube.cloudimg.io/s/cdn/x/https://edienet.s3.amazonaws.com/news/images/full_40419.jpg?v=15/06/2020%2016:52:00">
</div>
<div class="slide">
<img src = "https://e2k9ube.cloudimg.io/s/cdn/x/https://edienet.s3.amazonaws.com/news/images/full_40419.jpg?v=15/06/2020%2016:52:00">
</div>
</div>
<div class="navigation">
<label for="r1" class="bar"></label>
<label for="r2" class="bar"></label>
<label for="r3" class="bar"></label>
<label for="r4" class="bar"></label>
<label for="r5" class="bar"></label>
</div>
</div>
</body>
</html>
答案 0 :(得分:1)
好吧,让我们先看一下悬停时的淡入,然后再添加文字叠加层。
悬停时的淡入图像
这意味着从具有半透明设置(例如opacity:0.5
,然后悬停将其更改为opacity:1
。我们还希望它褪色,因此我们设置了transition
属性。因此,我们需要对您的代码段进行以下更改:
.slide img {
opacity: 0.5; /* Image has 50% opacity when it is loaded */
transition: opacity 1s; /* Set a 1 second transition effect of the opacity */
/* Rest of CSS...*/
}
.slide:hover img {
opacity: 1; /* Make the image 100% opacity when the slide is hovered */
}
淡入淡出文字叠加
我们要做的第一件事是添加要显示的文本。我们可以将其添加为div
类中的新slide
,并为其提供一个新类(例如imagecaption
),以便在CSS中定位它。
您已经有一个可将文本放置在绝对位置元素中间的类,因此我们可以使用它来处理位置:
<div class="slide">
<img src="https://example.com/myimage.jpg">
<div class="imagecaption middle">This is some text</div>
</div>
对于文本,我们希望它在开始时隐藏,并在悬停时淡入,因此我们将不透明度设置为0,并在悬停时将其更改为1,并使用transition属性获得淡入淡出效果
.imagecaption {
opacity: 0; /* Text is not visible when it is loaded */
transition: opacity 1s; /* Set a 1 second transition effect of the opacity */
}
.slide:hover .imagecaption {
opacity: 1; /* Text is made 100% visible when the slide is hovered */
}
工作示例:将所有这些放在一起:
body {
margin: 0;
padding: 0;
background: #34495e;
}
.slidershow {
width: 700px;
height: 400px;
overflow: hidden;
}
.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.navigation {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.bar {
width: 50px;
height: 10px;
border: 2px solid #fff;
margin: 6px;
cursor: pointer;
transition: 0.4s;
}
.bar:hover {
background: #fff;
}
input[name="r"] {
position: absolute;
visibility: hidden;
}
.slides {
width: 500%;
height: 100%;
display: flex;
}
.slide {
width: 20%;
transition: 0.6s;
}
.slide img {
width: 100%;
height: 100%;
opacity: 0.5;
transition: opacity 1s;
}
.imagecaption {
font-size: 2em;
opacity: 0;
transition: opacity 1s;
}
.slide:hover img {
opacity: 1;
}
.slide:hover .imagecaption {
opacity: 1;
}
#r1:checked~.s1 {
margin-left: 0;
}
#r2:checked~.s1 {
margin-left: -20%;
}
#r3:checked~.s1 {
margin-left: -40%;
}
#r4:checked~.s1 {
margin-left: -60%;
}
#r5:checked~.s1 {
margin-left: -80%;
}
<div class="slidershow middle">
<div class="slides">
<input type="radio" name="r" id="r1" checked>
<input type="radio" name="r" id="r2">
<input type="radio" name="r" id="r3">
<input type="radio" name="r" id="r4">
<input type="radio" name="r" id="r5">
<div class="slide s1">
<img src="https://e2k9ube.cloudimg.io/s/cdn/x/https://edienet.s3.amazonaws.com/news/images/full_40419.jpg?v=15/06/2020%2016:52:00">
<div class="imagecaption middle">This is some text</div>
</div>
<div class="slide">
<img src="https://e2k9ube.cloudimg.io/s/cdn/x/https://edienet.s3.amazonaws.com/news/images/full_40419.jpg?v=15/06/2020%2016:52:00">
<div class="imagecaption middle">This is some more text</div>
</div>
<div class="slide">
<img src="https://e2k9ube.cloudimg.io/s/cdn/x/https://edienet.s3.amazonaws.com/news/images/full_40419.jpg?v=15/06/2020%2016:52:00">
</div>
<div class="slide">
<img src="https://e2k9ube.cloudimg.io/s/cdn/x/https://edienet.s3.amazonaws.com/news/images/full_40419.jpg?v=15/06/2020%2016:52:00">
</div>
<div class="slide">
<img src="https://e2k9ube.cloudimg.io/s/cdn/x/https://edienet.s3.amazonaws.com/news/images/full_40419.jpg?v=15/06/2020%2016:52:00">
</div>
</div>
<div class="navigation">
<label for="r1" class="bar"></label>
<label for="r2" class="bar"></label>
<label for="r3" class="bar"></label>
<label for="r4" class="bar"></label>
<label for="r5" class="bar"></label>
</div>
</div>
请注意,如果不使用javascript,您将遇到一些问题,例如在悬停时更改非子代的CSS,例如当您将幻灯片悬停在幻灯片上时,它会显示100%的不透明度,但是当您悬停无关的导航时,该图像将不再发生悬停效果。
答案 1 :(得分:1)
请检查代码段和注释,以了解这是否是您想要的。
<mwc-icon-button icon="fa-linkedin" slot="actionItems"></mwc-icon-button>
<mwc-icon-button class="fab fa-linkedin" icon="linkedin" slot="actionItems"></mwc-icon-button>
* {
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
background: #34495e;
}
.slidershow{
width: 700px;
height: 400px;
overflow: hidden;
}
.middle{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.navigation{
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.bar{
width: 50px;
height: 10px;
border: 2px solid #fff;
margin: 6px;
cursor: pointer;
transition: 0.4s;
}
.bar:hover{
background: #fff;
}
input[name="r"]{
position: absolute;
visibility: hidden;
}
.slides{
width: 500%;
height: 100%;
display: flex;
}
.slide{
width: 20%;
transition: 0.6s;
}
.slide > h2 {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 30px);
text-align: center;
/* text-shadow: 0 2px 0 #000; */
padding: 15px;
background: rgba(255,255,255,.6);
color: #333;
font-size: 18px;
border-radius: 5px;
visibility: hidden;
opacity: 0;
transition: all .5s ease;
z-index: 2;
}
.slides .slide:hover > h2 {
visibility: visible;
opacity: 1;
}
.slide img{
width: 100%;
height: 100%;
}
#r1:checked ~ .s1{
margin-left: 0;
}
#r2:checked ~ .s1{
margin-left: -20%;
}
#r3:checked ~ .s1{
margin-left: -40%;
}
#r4:checked ~ .s1{
margin-left: -60%;
}
#r5:checked ~ .s1{
margin-left: -80%;
}
#r1:checked ~ .navigation [for="r1"] {background: #fff}
#r2:checked ~ .navigation [for="r2"] {background: #fff}
#r3:checked ~ .navigation [for="r3"] {background: #fff}
#r4:checked ~ .navigation [for="r4"] {background: #fff}
#r5:checked ~ .navigation [for="r5"] {background: #fff}