Make font-awesome icon size increase on mouseover

Question

I am using font-awesome with bootstrap 4 cards, is there anyway to increase the size of the font-awesome icon (bottom right) when I mouse over the button?

in this case <i class="fa fa-folder-open fa-5x"></i>

Here is the HTML

                <div class="col-md-3 col-sm-6">
                    <div class="card card-inverse card-success">
                        <div class="card-block bg-success">
                            <div class="rotate">
                                <i class="fa fa-folder-open fa-5x"></i>
                            </div>
                            <center><a class="btn btn-success show" target="1" role="button"><h5 class="text-uppercase">open cases &nbsp;&nbsp;<i class="fa fa-arrow-circle-right fa-1x"></i></h5></a></center>
                            <h1 class="display-1"><center>7</center></h1>
                        </div>
                    </div>
                </div>

Here is what it presently looks like

Solution 1

Use .card:hover > .card-block > .rotate > .fa { } to target the icon.

Then you can use font-size: 6em; to enlarge the font or use the transform: scale() css.

Both look better adding a transition for the .fa so it will animate on hover.

EDIT: The transition should be set on .card > .card-block > .rotate > .fa { } (so without the :hover).

Example: .card > .card-block > .rotate > .fa { transition: font-size 0.35s ease; } .card:hover > .card-block > .rotate > .fa { font-size: 5em; }

(Don't forget to add extra rules with prefixes for cross-browser compatibility, see caniuse.com or W3schools for reference.)

Solution 2

look maybe this help you

.rotate .fa.fa-folder-open:hover{
  font-size:6em;
  transition: 1s ease-out;
}

example

Comments

[user3436467]

need .fa.fa-folder-open to expand when i mouseover the button not the icon

[user3436467]

this looks nice and works.. testing it now with a transition effect

[user3436467]

i did this and it worked: .card:hover > .card-block > .rotate > .fa { font-size: 6em; transition: 1s ease-out;}

[Philip]

But on mouse-out it might not animate I think.. ( because the CSS rule with transition doesn't apply anymore)

[Philip]

See the edit-part; just create 2 rules: :hover -> what to change 2) other -> the transition

[user3436467]

i tried this but not animating.. .card { transition: all .1s ease-in-out; }

[Philip]

Not on the card, on the .fa, but with a non-hovered parent (see example)

[Mohammed Omer]

@user3436467 you can accomplish this by using some jquery tricks , try something like $('.fa.fa-folder-open').hide(); and then for the other action $('fa.fa-folder-close').show(); you can also use add class option in jquery , this stuff you can make in various ways. and sorry for the missy here comments is not a good place to write codes.