WordPress.org

Ready to get started?Download WordPress

Forums

Spun
[resolved] Enlarge circles when pass the mouse (11 posts)

  1. Gabri99
    Member
    Posted 5 months ago #

    Hey! I just saw this webpage: http://www.cevizhane.org/ and I saw that when you pass the mouse on these three posts: Ceviz Sağlıktır/Neden Ceviz?/İletişim the circle enlarges. I want the same on my webpage: http://www.analiticocorporla.com/ How do I do it? Thanks!!

  2. david-giorgi
    Member
    Posted 5 months ago #

    Hello
    This is the CSS that zooms the circle.

    .round-div {
    transform: scale(1.4);
    }

  3. Gabri99
    Member
    Posted 5 months ago #

    It didn't work :(

  4. Eric Arcana
    Member
    Posted 5 months ago #

    @Gabri99: The site you want to emulate is using CSS transform, which you can find here: http://www.w3schools.com/cssref/css3_pr_transform.asp

    The link to your site does not appear to be working so I am unsure as the div/call you are using but this would be the basics:

    .widget-front.hover .round-div, article.hover .round-div {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -ms-transform: scale(1.4);
    -o-transform: scale(1.4);
    transform: scale(1.4);
    }

  5. david-giorgi
    Member
    Posted 5 months ago #

    Yep Eric is right I forgot the selector (:hover) to detec the mouseOver event

    .round-div:hover {
    transform: scale(1.4);
    }

  6. Gabri99
    Member
    Posted 5 months ago #

    the link is http://www.analiticocorporal.com/ sorry! I'll try now this and I'll tell you if it worked. Thank you!

  7. Eric Arcana
    Member
    Posted 5 months ago #

    Thanks for the correct link Gabri99. Here is the code to add:

    .blog .hentry a:hover img {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -ms-transform: scale(1.4);
    -o-transform: scale(1.4);
    transform: scale(1.4);
    }
  8. Gabri99
    Member
    Posted 5 months ago #

    I'm not sure what I had to do with the link that Eric gave me I copied this to my child theme:

    .widget-front.hover .round-div, article.hover .round-div {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -ms-transform: scale(1.4);
    -o-transform: scale(1.4);
    transform: scale(1.4);
    }

    but it still didn't work.

  9. Eric Arcana
    Member
    Posted 5 months ago #

    @Gabri99: The link I provided was for future reference; to learn from. The first bit of code is what was used by the site you wanted to emulate. The second (reposted below) is what you need:

    .blog .hentry a:hover img {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -ms-transform: scale(1.4);
    -o-transform: scale(1.4);
    transform: scale(1.4);
    }

    Hope it helps

  10. Gabri99
    Member
    Posted 5 months ago #

    Great it worked thanks!! Could you please watch the other question it posted in this forum to help? Thank you!
    http://wordpress.org/support/topic/two-lines?replies=1

  11. Gabri99
    Member
    Posted 5 months ago #

    Forgot to resolve it!

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.