waifuism.life
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
waifuism/home/friends/style.css

91 lines
2.4 KiB

body {
background-color: black;
color: white;
width: 100%;
}
.grid-container {
display: grid;
grid-template-columns: repeat(8, 1fr); /* Create 8 columns of equal width */
gap: 10px; /* Adjust the gap between grid items */
width: 100%; /* Set the width to 100% of the viewport width */
overflow: hidden;
}
.friend img {
transition: transform 0.3s ease;
max-width: 100%;
height: auto;
margin: 0 auto;
}
.friend img:hover {
transform: scale(1.1);
}
.caption {
display: none; /* Initially hide the caption */
text-align: center;
color: white;
text-decoration: none;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black; /* Add a black outline */
}
.friend:hover .caption {
display: block; /* Display the caption when hovering over the image */
}
.friend {
text-align: center;
animation: wiggle 0.5s ease-in-out infinite alternate; /* Make the image wiggle side to side */
}
@keyframes wiggle {
from {
transform: translateX(-5px);
}
to {
transform: translateX(5px);
}
}
/* Stars */
.star1 {
width: 50px; /* Adjust the size of your star image */
height: 50px; /* Adjust the size of your star image */
background-image: url('star.png'); /* Replace 'star.png' with the path to your star image */
background-size: cover;
animation: rotateStar 5s linear infinite; /* Adjust animation duration and timing function as needed */
}
.star2 {
width: 50px; /* Adjust the size of your star image */
height: 50px; /* Adjust the size of your star image */
background-image: url('star.png'); /* Replace 'star.png' with the path to your star image */
background-size: cover;
animation: rotateStar 7s linear infinite; /* Adjust animation duration and timing function as needed */
}
.star3 {
width: 50px; /* Adjust the size of your star image */
height: 50px; /* Adjust the size of your star image */
background-image: url('star.png'); /* Replace 'star.png' with the path to your star image */
background-size: cover;
animation: rotateStar 10s linear infinite; /* Adjust animation duration and timing function as needed */
}
@keyframes rotateStar {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}