CODEWITHSUNDEEP
javascriptjqueryhtmlhoverjquery-hover
Automatik
Automatik

Reputation: 337

JQuery - Make icons bigger when hovered

I have a navbar with icons and under each of them some text(like home, contacts, ecc..). I would like that if I go over the text the icons became bigger. For now I can do it only if the mouse go over the icon.

Here's my navbar: 

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav ">
                        <li>
                            <a href="#">
                                <img src="img/ico_nav/hamburger.jpg" class="img-circle noinmobile icons" alt="Menù" width="50" height="50" style=" margin-bottom:15px">
                                <p class="navtext">HOME</p>
                            </a>
                        </li>
                        <li>
                            <a href="#storia">
                                <img src="img/ico_nav/storia.jpg" class="img-circle noinmobile icons" alt="Menù" width="50" height="50" style=" margin-bottom:15px">
                                <p class="navtext">STORIA</p>
                            </a>
                        </li>
                        <li>
                            <a href="#menù">
                                <img src="img/ico_nav/hamburger.jpg" class="img-circle noinmobile icons" alt="Menù" width="50" height="50" style=" margin-bottom:15px">
                                <p class="navtext">MENÙ</p>
                            </a>
                        </li>
                        <li>
                            <a href="#gallery">
                                <img src="img/ico_nav/gallery.jpg" class="img-circle noinmobile icons" alt="Menù" width="50" height="50" style=" margin-bottom:15px">
                                <p class="navtext">GALLERY</p>
                            </a>
                        </li>
                        <li>
                            <a href="#contatti">
                                <img src="img/ico_nav/contatti.jpg" class="img-circle noinmobile icons" alt="Menù" width="50" height="50" style=" margin-bottom:15px">
                                <p class="navtext">CONTATTI</p>
                            </a>
                        </li>
                    </ul>
                </div>

And here's the script:

function makeBigger() {
        $(this).css({height: '+=10%', width: '+=10%'});
    }
    function returnToOriginalSize() {
        $(this).css({height: "", width: ""});
    } 
    $(function(){
        $('.icons').hover(makeBigger, returnToOriginalSize);
    }

As it is now the icons become bigger when hovered, but I want that they become bigger also if the text under the icon is hovered. How can I do it? I tried but unfortunately I couldn't figured out how to do it.

I hope I explained myself! Thanks in advance

Upvotes: 0

Views: 1305

Answers (1)

Bill Criswell
Bill Criswell

Reputation: 32921

You don't need javascript for this. You can use simple CSS transitions. Something like:

.navbar-nav li img {
  transition: transform 0.4s;
  transform: scale(1);
}

.navbar-nav li:hover img {
  transform: scale(1.5);
}

If you don't want the transition you can remove the transition line. You can also use width and height instead of transform for some way back (in browser time) browser support.

Upvotes: 4

Related Questions