Is there a way for when I hover over the avatar image text slides in?
Question
So pretty much I have a avatar that is floating up and down, but I also want to add a way for when you hover over it, text will slide in that says my name. I don't care if it is JavaScript or CSS, I also want to keep the hover animation that happen when you hover over the image. Here is my code so far.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Floating Avatar</title>
<link rel="stylesheet" href="./styles/main.css">
<script src="./js/main.js" defer></script>
</head>
<body>
<div class="container">
<div class="avatar">
<img src="assets/images/avatar.png" alt="avatar" class="avatarimage"/>
</a>
</div>
</div>
</body>
</html>
CSS:
body,
html {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Helvetica', sans-serif;
background: linear-gradient(90deg, #FDBB2D 0%, #3A1C71 100%);
}
h1 {
font-size: 24px;
margin: 10px 0 0 0;
font-weight: lighter;
text-transform: uppercase;
color: #eeeeee;
}
p {
font-size: 12px;
font-weight: light;
color: #333333;
}
span a {
font-size: 18px;
color: #cccccc;
text-decoration: none;
margin: 0 10px;
transition: all 0.4s ease-in-out;
&:hover {
color: #ffffff;
}
}
@keyframes float {
0% {
box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
transform: translatey(0px);
}
50% {
box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
transform: translatey(-20px);
}
100% {
box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
transform: translatey(0px);
}
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.avatar {
width: 150px;
height: 150px;
box-sizing: border-box;
border: 5px white solid;
overflow: hidden;
box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
transform: translatey(0px);
animation: float 6s ease-in-out infinite;
img { width: 1000%; height: auto; }
}
.avatarimage:hover {
transform: scale(1.05);
}
.avatarimage {
width: 100%;
transition: all .5s ease-in-out;
}
1 answers
solution1
1 ACCPTED 2022-11-14 22:51:14
This is totally possible with CSS and isn't that hard to accomplish since you already have overflow hidden set on your .avatar class.
Basically you'll just add your name inside .avatar :
<div class="avatar">
<img src="assets/images/avatar.png" alt="avatar" class="avatarimage" />
<p class="avatarname">Your Name</p>
</div>
Then, you'll add the CSS to transition that in on the hover of .avatar :
.avatarname {
color: white;
font-size: 2rem;
left: 0;
position: absolute;
top: 0;
transform: translateX(-100%);
transition: all 0.5s ease-in-out;
}
.avatar:hover .avatarname {
transform: translateX(0%);
}
You'll also need to add position: relative; to your .avatar CSS.
This works, but there are some other things that we can clean up. You have a few things defined in a few places. Your img styles for example, that could be in one place, especially since you're using SCSS. Here is a cleaned up example for you:
body, html { height: 100%; margin: 0; padding: 0; font-family: "Helvetica", sans-serif; background: linear-gradient(90deg, #fdbb2d 0%, #3a1c71 100%); } @keyframes float { 0% { box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6); transform: translatey(0px); } 50% { box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2); transform: translatey(-20px); } 100% { box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6); transform: translatey(0px); } }.container { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }.avatar { animation: float 6s ease-in-out infinite; border: 5px white solid; box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6); box-sizing: border-box; height: 150px; overflow: hidden; position: relative; transform: translatey(0px); width: 150px; }.avatar img { object-fit: cover; height: 100%; transition: all 0.5s ease-in-out; width: 100%; }.avatar.avatarname { color: white; font-size: 2rem; left: 0; position: absolute; top: 0; transform: translateX(-100%); transition: all 0.5s ease-in-out; }.avatar:hover img { transform: scale(1.05); }.avatar:hover.avatarname { transform: translateX(0%); }
<div class="container"> <div class="avatar"> <img src="https://images.unsplash.com/photo-1520423465871-0866049020b7?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg0NjUwNjI&ixlib=rb-4.0.3&q=80" alt="avatar" class="avatarimage" /> <p class="avatarname">Your Name</p> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.