0

I have some kind of image that I want to have in all my pages of my website to use to return to my homepage.

So far, I managed to get the image in position I want and I already have displayed in all my webpages with reference link to the homepage.

But I want to go a bit far and had an animation to it, so when somebody use the mouse to hover the image I wanted the image to move some px (50px for example) to the bottom.

Yet, all I could do so far was this:

.penduricalho{
  background-repeat: no-repeat;
  position: relative;
  top: -200px;
  right: -200px;
  margin-bottom: -500px;
  -webkit-transition: bottom 0.3s;
  -moz-transition: bottom 0.3s;
  -o-transition: bottom 0.3s;
}

But with the piece of code above the image was in fact moving but it originated other problem that it would move all the content beneath it.

I tried this other code:

CSS:

.penduricalho{
  background-repeat: no-repeat;
  position: relative;
  top: -200px;
  right: -200px;
  margin-bottom: -500px;
}

figcaption { 
  position: absolute; 
  background: rgba(0,0,0,0.75); 
  color: white; 
  padding: 10px 20px; 

  opacity: 0;
  bottom: 0; 
  bottom: : -30%;
  -webkit-transition: all 0.6s ease;
  -moz-transition:    all 0.6s ease;
  -o-transition:      all 0.6s ease;
}

figure:hover figcaption {
  opacity: 1;
  left: 0;
}

HTML:

<div class="penduricalho">
    <figure>
        <a href="http://10.0.1.43/"><img src="http://alojamento.fct.unl.pt/sites/all/themes/javali_theme/images/penduricalho.png"></img></a></p>
        <figcaption>
            aye!!
    </figure>
</div>

Still with this code the image wasn't moving, only appteared a text sliding. And that is similarly to want I want, that is, slide my image a bit to the bottom. But when I try to alter this latter code the page unconfigured itself.

0

Ok, now with this code I have my image doing the animation/transition that I wanted, moving down smoothly:

CSS:

.penduricalho{
  background-repeat: no-repeat;
  position: relative;
  top: 0px;
  left: 200px;
  margin-bottom: -500px;
  display: block;
  position: absolute;
  z-index: 2;
  height: auto;
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
}

.penduricalho:hover{  
  -moz-transform: translateY(50px); /* Firefox */
  -webkit-transform: translateY(50px); /* Safari | Chrome */
  -o-transform: translateY(50px); /* Opera */
  transform: translateY(50px);

  -moz-transition-duration: .5s;
  -webkit-transition-duration: .5s;
  -o-transition-duration: .5s;
  transition-duration: .5s;
}

HTML:

<div class="penduricalho">
    <a href="http://10.0.1.43/"><img src="http://alojamento.fct.unl.pt/sites/all/themes/javali_theme/images/penduricalho.png"></img></a></p>
</div>

Run it here if you want to see the result:

https://jsfiddle.net/sn1hs9hp/

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.