javascriptslideshow/style.css at main · AliGhDeveloper/javascriptslideshow · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
.slide{
position: relative;
display: none;
}

.slide.active{
display: block;
}

.slides{
position:relative;
cursor: pointer;
}

img{
width:100%;
}
.slidediv{
position: absolute;
bottom:0;
display: flex;
justify-content: center;
align-items: center;
background-color:rgba(239,45,100,0.526);
width:100%;
min-height:44px;
transition: min-height 0.5s;
}

.slidediv:hover{
min-height:100%;

}

.slidediv>p {
margin-bottom:0;
font-size:1rem;
transition: font-size 0.5s;
}

.slidediv:hover>p {
font-size:3rem;
}

.next, .prev{
position:absolute;
background-color:rgba(37,34,34,0.641);
bottom:50%;
color:#fff;
padding:16px;
margin-bottom:-32px;
-webkit-user-select: none;
-moz-user-select: none;
}

.next:active, .prev:active{
background-color:rgba(37,34,34,0.395)
}

.next{
right:0;
border-radius:3px003px;
}

.prev{
left:0;
border-radius:03px3px0;
}

.buttonsspan{
display:inline-block;
margin-top:10px;
width:15px;
height:15px;
border-radius:50%;
background-color:rgba(59,56,56,0.753);
}

.buttonsspan.active{
background-color:rgba(59,56,56,0.933);
}

.buttons {
user-select: none;
}