Issue
I'm trying to create this cool button for my personal diet app project - a button from which a little text slides out of from the right when the mouse hovers it. It's almost done, there's just one single problem that I cannot solve: I don't want the text to be floating around nothing, I want it to appear inside a box with black background and yellow borders... but my text has 0 width in order to start the animation "inside" the button, and so the black box that I want is just a black vertical line in the middle of the button - also, the black box is always visible, instead of being transparent like the text before the mouse hover. I simply can't get it to work - I have tried increasing the width, enveloping the text in containers, stylizing them - all it did was change the problem. HELP!!!
#create-meal-button {
background-color: #ffc107;
border-radius: 100%;
transition: 0.3s;
display:inline-block;
}
#create-meal-button:hover {
transform: scale(1.2);
background-color: black;
border: solid 0.1vw #ffc107;
}
#create-meal-button > svg { width: 50px; }
#create-meal-button > svg:hover { fill:#ffc107; }
#create-meal {
text-align: center;
}
#create-meal > div {
display: inline-block;
}
span {
display: inline-block; /* inline-block so width can be set */
width: 0;
white-space: nowrap; /* keep text in one line */
direction: ltr; /* overflow direction */
color: rgba(255,255,255,0); /* text transparency before hover */
transition: .5s;
transform: translateX(-20px); /* distance the text will move on hover */
pointer-events: none;
}
#create-meal > div:hover span {
color: #ffc107;
border: solid 0.1vw #ffc107;
transform: translateX(0);
}
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</head>
<div id="create-meal">
<div>
<button id="create-meal-button" class="btn">
<svg xmlns="http://www.w3.org/2000/svg" height="50" viewBox="0 -960 960 960" width="50">
<path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/>
</svg>
</button>
<span id="create-meal-tooltip" class="bg-black p-1 rounded">Create meal</span>
</div>
</div>
Solution
You can make the following adjustments to your code and check that this is what you want to have.
#create-meal-button {
background-color: #ffc107;
border-radius: 100%;
transition: 0.3s;
display:inline-block;
position: relative; /* Add this line */
}
#create-meal-button:hover {
transform: scale(1.2);
background-color: black;
border: solid 0.1vw #ffc107;
}
#create-meal-button > svg { width: 50px; }
#create-meal-button > svg:hover { fill:#ffc107; }
#create-meal {
text-align: center;
}
#create-meal > div {
display: inline-block;
}
#create-meal-tooltip {
overflow: hidden; /* Add this line */
display: inline-block;
white-space: nowrap;
direction: ltr;
color: rgba(255,255,255,0);
transition: .5s;
transform: translateX(-20px);
position: absolute; /* Add this line */
top: 50%;
left: 50%;
transform: translate(-50%, -50%) translateX(0%); /* Modified this line */
opacity:0;
}
#create-meal-button:hover #create-meal-tooltip {
color: #ffc107;
opacity: 1;
background-color: black;
border: solid 0.1vw #ffc107;
transform: translate(-50%, -50%) translateX(100%); /* Modified this line */
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div id="create-meal">
<button id="create-meal-button" class="btn">
<svg xmlns="http://www.w3.org/2000/svg" height="50" viewBox="0 -960 960 960" width="50">
<path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/>
</svg>
<span id="create-meal-tooltip" class="bg-black p-1 rounded">Create meal</span>
</button>
</div>
Answered By - Kevin
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.