Wie kann ich den Schwebentwickel auf dem Desktop unter dem Bild erscheinen? ⇐ HTML

[Anonymous]

Ich erstelle eine Website im Zusammenhang mit einer Branding -Agentur und erstelle ihren Teamabschnitt, auf dem ich die Bilder von Teammitgliedern eine Schwebeanimation einsetzen muss, um ihre Namen, Rollen und LinkedIn -Profil -Schaltflächen als Overlay -Text anzuzeigen. Obwohl ich das für die Desktop -Ansicht erfolgreich gemacht habe, kann ich in der mobilen Ansicht nicht eine Lösung finden, aber ich möchte die mobile Ansicht so erstellen, dass die Beschreibung des Teammitglieds (Name, Rolle und LinkedIn) in den kleineren Bildschirmen festgelegt wird, während das Layout ähnlich ist, wie der Desktop angezeigt wird. Unten finden Sie den Code für dasselbe < /p>

Code: Select all

/* team container CSS start */
.team-container-outer {
display: flex;
align-items: center;
justify-content: center;
width: 100dvw;
height: 150vh;
}

.team-container {
display: flex;
width: 80%;
height: 90%;
flex-direction: column;
align-items: center;
}

@media (min-width:1450px) {
.team-container-outer {
width: 100dvw;
height: 180vh;
}

.team-container {
display: flex;
width: 60%;
height: 90%;

}
}

.first-column,
.second-column,
.third-column {
width: 100%;
display: flex;
}

.first-column {
flex: 2.5 1;
flex-direction: row;
justify-content: space-between;
gap: 25px;
}

.second-column {
flex: 1 1;
flex-direction: column;
justify-content: center;
text-align: center;
}

.third-column {
flex: 3 1;
justify-content: space-between;
gap: 25px;
}

/* Base styles for all boxes */
.box {
width: 30%;
border-radius: 40px;
position: relative;
overflow: hidden;
cursor: pointer;
}

/* Remove hover from parent box6 */
.box6 {
width: 30%;
display: flex;
flex-direction: column;
height: 98%;
gap: 3%;
transform: none !important;
transition: none !important;
}

/* Individual box styles */
.box1, .box2, .box3, .box4, .box5 {
transition: transform 0.3s ease;
}

.box6-1, .box6-2 {
width: 100%;
flex: 1;
border-radius: 40px;
position: relative;
overflow: hidden;
background-size: cover;
background-position: center;
transition: transform 0.3s ease;
}

/* Hover effects for individual boxes */
.box1:hover, .box2:hover, .box3:hover, .box4:hover, .box5:hover,
.box6-1:hover, .box6-2:hover {
transform: scale(1.05);
}

/* Team member overlay styles */
.team-member-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
padding: 20px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 15px;
}

/* Show overlay only on hover of individual boxes */
.box1:hover .team-member-overlay,
.box2:hover .team-member-overlay,
.box3:hover .team-member-overlay,
.box4:hover .team-member-overlay,
.box5:hover .team-member-overlay,
.box6-1:hover .team-member-overlay,
.box6-2:hover .team-member-overlay {
opacity: 1;
visibility: visible;
}

.team-member-name {
color: white;
font-size: 1.4rem;
font-weight: 600;
margin: 0;
}

.team-member-role {
color: #4dd6f5;
font-size: 1rem;
margin: 0;
font-weight: 500;
}

.linkedin-btn {
background: #0077b5;
color: white;
padding: 10px 20px;
border-radius: 25px;
text-decoration: none;
font-size: 0.95rem;
transition: all 0.3s ease;
border: none;
margin-top: 5px;
}

.linkedin-btn:hover {
background: #005885;
transform: translateY(-2px);
}

/* Box background images */
.box1 {
background: url(https://www.istockphoto.com/photos/full-length-person);
background-size: cover;
height: 70%;
}

.box2 {
background: url(https://www.istockphoto.com/photos/full-length-person);
background-size: cover;
height: 70%;
align-self: end;
}

.box3 {
background: url(https://www.istockphoto.com/photos/full-length-person);
background-size: cover;
height: 70%;
}

.box4 {
background: url(https://www.istockphoto.com/photos/full-length-person);
background-size: cover;
height: 95%;
align-self: center;
}

.box5 {
background: url(https://www.istockphoto.com/photos/full-length-person);
background-size: cover;
height: 80%;
align-self: center;
}

.box6-1 {
background:  url(https://www.istockphoto.com/photos/full-length-person);
background-size: cover;
}

.box6-2 {
background: url(https://www.istockphoto.com/photos/full-length-person);
background-size: cover;
}

/* Media queries */
@media (max-width: 768px) {
.team-container-outer {
height: 90vh;
}

.team-member-overlay {
padding: 15px;
}

.team-member-name {
font-size: 1.2rem;
}

.team-member-role {
font-size: 0.9rem;
}

.linkedin-btn {
padding: 8px 16px;
font-size: 0.85rem;
}
}

@media (max-width: 480px) {
.team-container-outer {
height: 45vh;
}

.box, .box6-1, .box6-2 {
border-radius: 25px;
}

.team-member-overlay {
padding: 10px;
opacity: 1;
visibility: visible;
background: rgba(0, 0, 0, 0.75);
}

.team-member-name {
font-size: 1rem;
}

.team-member-role {
font-size: 0.8rem;
}

.linkedin-btn {
padding: 6px 12px;
font-size: 0.8rem;
}
}

@media screen and (max-width: 360px) {
.team-member-name {
font-size: 0.9rem;
}

.team-member-role {
font-size: 0.75rem;
}

.linkedin-btn {
padding: 5px 10px;
font-size:  0.75rem;
}
}< /code>






Aayush
Frontend Developer
[url=https://www.linkedin.com/in/aayush]LinkedIn Profile[/url]




Lakshya
Founder and UI/UX Designer
[url=https://www.linkedin.com/in/lakshya]LinkedIn Profile[/url]




Abhijeet
Graphic Designer and Video Editor
[url=https://www.linkedin.com/in/abhijeet]LinkedIn Profile[/url]




MEET OUR TEAM
We Explore, Create, Design, Develop only for your Growth



Sumit
Full Stack Developer
[url=https://www.linkedin.com/in/sumit]LinkedIn Profile[/url]




Aman
LinkedIn Manager
[url=https://www.linkedin.com/in/aman]LinkedIn Profile[/url]





Avneesh
Web Developer
[url=https://www.linkedin.com/in/avneesh]LinkedIn Profile[/url]




Divyanshu
Web Developer
[url=https://www.linkedin.com/in/divyanshu]LinkedIn Profile[/url]