CODEWITHSUNDEEP
htmlcss
Edy Eduard
Edy Eduard

Reputation: 31

moving arrow animation with css

I want to make an arrow that moves to the right when I hover over the element it is in. Right now my both elements move at the same time.(h3 and span).

The arrow and the text must be on the same line. only the arrow should move. I need to use only html and css (no js or ajax).

.container-fluid .blue-row {
    background-color: #03a9f4;
    width: 100%;
    margin: auto;
}

.container-fluid .blue-row h3 {
    color: white;
    font-size: 39px;
    text-align: center;
    vertical-align: center;
    padding: 40px;
    font-weight: bold;
}

.container-fluid .blue-row h3 span {
    margin-left: 5%;
    transition: 1s;
}

.container-fluid .blue-row:hover > h3 span {
    margin-left: 10%;
}
<div class="container-fluid">
    <div class="blue-row">
        <h3>Check how we can kickstart your smart projects<span>&#10230;</span></h3>
    </div>
</div>

Upvotes: 0

Views: 4165

Answers (1)

s.kuznetsov
s.kuznetsov

Reputation: 15213

Use rule transform: translateX() for hover, and preferably for default. Also, make the span block using rule display: inline-block.

.container-fluid .blue-row {
    background-color: #03a9f4;
    width: 100%;
    margin: auto;
}

.container-fluid .blue-row h3 {
    color: white;
    font-size: 39px;
    text-align: center;
    vertical-align: center;
    padding: 40px;
    font-weight: bold;
}

.container-fluid .blue-row h3 span {
    display: inline-block;
    transform: translateX(20%);
    transition: 1s;
}

.container-fluid .blue-row:hover > h3 span {
    transform: translateX(50%);
}
<div class="container-fluid">
    <div class="blue-row">
        <h3>Check how we can kickstart your smart projects<span>&#10230;</span></h3>
    </div>
</div>

Upvotes: 3

Related Questions