Hover animation problem

  • tbucks11

    (@tbucks11)


    7 years ago

    Hi!

    Somehow the first icon of this page isn’t reacting in the same way as the two others. The way I did this was to save two different images (one plain and one slightly zoomed in with the text), and this is the code I have:

    On the first few days I’ve updated this, it worked fine. I now have the same issue on a couple of different icons on the website, and I just don’t understand where it comes from and why it seems to show up at random. Anyone sees any mistake below or has any idea why this is occuring?

    Thank you kindly in advance!

    <div>
<div style="width: 32%; float: left;">
<div id="cf" style="width: 100%; float: left;">

<img src="https://thais-breton.com/wp-content/uploads/2018/02/corporate1-1.jpg" alt="" width="390" height="219" class="top" />

<a href="https://thais-breton.com/corporate/">

<img src="https://thais-breton.com/wp-content/uploads/2018/02/corporate0-2.jpg" alt="" width="390" height="219" class="bottom" />
</a>

</div>
</div>
</div>
<div style="width: 32%; margin-left: 2%; float: left;">
<div id="cf" style="width: 100%; float: left;">

<img src="https://thais-breton.com/wp-content/uploads/2018/02/coverage1.jpg" alt="" width="390" height="219" class="top" />

<a href="https://thais-breton.com/coverage/">

<img class="top" src="https://thais-breton.com/wp-content/uploads/2018/02/coverage0.jpg" alt="" width="390" height="219" class="bottom"/>
</a>

</div>
</div>
<div style="width: 32%; margin-left: 2%; float: left;">
<div id="cf" style="width: 100%; float: left;">

<img src="https://thais-breton.com/wp-content/uploads/2018/02/PERSONAL1.jpg" alt="" width="390" height="219" class="top" />

<a href="https://thais-breton.com/personal/">

<img class="top" src="https://thais-breton.com/wp-content/uploads/2018/02/PERSONAL0-1.jpg" alt="" width="390" height="219" class="bottom" />

</a>
</div>
</div>

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • a2hostinglk

    (@a2hostinglk)

    Your site is working fine and I see hover over working. What is the issue?

    a2hostinglk

    (@a2hostinglk)

    I would also suggest posting CSS so we can help.

    Thread Starter tbucks11

    (@tbucks11)

    Hi @a2hostinglk,

    I posted the code above, isn’t that CSS?
    I just checked again, the issue I’m talking about is still here. If you take this page: https://thais-breton.com/portfolio/
    The hover animation is working on all 3 icons, but on the first one (“corporate”), it doesn’t hover all the way. The text is faded out, the zoom doesn’t happen entirely and the opacity in the background doesn’t go all the way either like on the other two icons.

    Thanks

    @tbucks11

    You have provided the HTML markup (not CSS).

    I tried visiting your site but it is taking way too much time to load.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Hover animation problem’ is closed to new replies.