Html - Text slide reveal animation

MatheusCaetanoRocha
November 2, 2023
197 views
0 votes
2 Answers

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Answers

This is the code that can make the text appear around the button and there is no change for the HTML.

#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-tooltip {
    opacity:0;
    position:relative;
    transform: translateX(-20px);
    transition: opacity .5s, transform .5s;
    pointer-events: none;
    display:inline-block;
}
#create-meal:hover #create-meal-tooltip {
    opacity:1;
    transform: translateX(5px); /*add some space*/
    color: #ffc107;
    border: solid 0.1vw #ffc107;
}

<head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

I use opacity:0; to change the original one, so that it can appear more smoothy. Also, I use transform: translateX(-20px); to achieve "slides out of from the right".

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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Text slide reveal animation

Answers