CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Olen
Olen

Reputation: 1185

Change size of object when hovering

I am trying to add a hover effect to my object using CSS, but it seems like the html is too complex for it to change. Therefor I ask you for some advice.

The :hover effect is going to change the size and color of the object.

I have tagged jquery and javascript incase it's easier to do the effect in that language.

PHP

<div class="holder forsideikonholder">
    <div class="container">
        <div class="row">
            <ul class="prosess">
                <a href="#">
                    <div class="col-md-4 foto">
                        <li>
                            <object data="<?php bloginfo('stylesheet_directory'); ?>/img/ikon-foto.svg" type="image/svg+xml">
                                <img src="<?php bloginfo('stylesheet_directory'); ?>/img/ikon-foto.png">
                            </object>
                            <p class="thin">Fotografering</p>
                        </li>
                    </div>
                </a>

                <a href="#">
                    <div class="col-md-4 video">
                        <li>
                            <object data="<?php bloginfo('stylesheet_directory'); ?>/img/ikon-video.svg" type="image/svg+xml">
                                <img src="<?php bloginfo('stylesheet_directory'); ?>/img/ikon-video.png">
                            </object>
                            <p class="thin">Videoproduksjon</p>
                        </li>
                    </div>
                </a>

                <a href="#">
                    <div class="col-md-4 web">
                        <li>
                            <object data="<?php bloginfo('stylesheet_directory'); ?>/img/ikon-web.svg" type="image/svg+xml">
                                <img src="<?php bloginfo('stylesheet_directory'); ?>/img/ikon-web.png">
                            </object>
                            <p class="thin">Webutvikling</p>
                        </li>
                    </div>
                </a>
            </ul>
        </div>
    </div>
</div>

CSS

Here is the most important CSS for this question:

.forsideikonholder .prosess {
    width: 80%;
    margin: auto;
}

.forsideikonholder object {
    width: 50%; 
}

I have tried to do it like this, but as I mentioned, - it seems like it's to complex and I am not selecting the right object.

.forsideikonholder a:hover {
        width: 60%; 
    }

  .forsideikonholder object:hover {
        width: 60%; 
    }

Here is the site: http://goo.gl/kbWlGR

Scroll down till you see the orange part with 3 icons.

Upvotes: 0

Views: 676

Answers (2)

user3980282
user3980282

Reputation: 

.forsideikonholder a {
       display:block;
    }

Upvotes: 2

Jeremy
Jeremy

Reputation: 548

A a tag is an inline element and its size can't be modified by default. You have here to transform your a tags into blocks with display: block;. That way you will be able to play with their size (without changing anything in your :hover rule).

Moreover, your markup is wrong: a ul mustn't contain anything else than li tags: move your li tags to make them encapsulate the whole content of your buttons.

Upvotes: 3

Related Questions