CODEWITHSUNDEEP
htmlcssscrollhoversmooth-scrolling
Xeway
Xeway

Reputation: 41

How to make this scrolling effect with :hover?

I'm learning HTML & CSS and trying to create my own website.

I want to add a scrolling effect where when you click on an image (or text), another image come up and replace the other. And same when you want to see the first image.

And I made it !

My code :

<div class="animation">
   <a href="#baguette" class="france">
      <img src="france_flag.png" alt="" id="france"/>
   </a>
   <a href="#france" class="baguette">
      <img src="baguette.png" alt="" id="baguette"/>
   </a>
</div>


.animation
{
    display: inline-block;
    width: 120px;
    height: 120px;
    overflow-y: scroll;
    scroll-behavior: smooth;
    overflow: hidden;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 30px;
}

.animation img
{
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

(I add margin and other element because it's just a part of my website)

Ok, when you click, it's cool. But I want more : I want that the "animation" start when you just pass your mouse above the div.

I've tried to do that :

<div class="animation">
   <a href="#baguette" class="france">
      <img src="france_flag.png" alt="" id="france"/>
   </a>
   <a href="#france" class="baguette">
      <img src="baguette.png" alt="" id="baguette"/>
   </a>
</div>

(I added class to <a> tags)

.animation
{
    display: inline-block;
    width: 120px;
    height: 120px;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 30px;
    overflow: hidden;
}

.animation:hover a.france
{
    overflow-y: scroll;
    scroll-behavior: smooth;
}

.animation:hover a.baguette
{
    overflow-y: scroll;
    scroll-behavior: smooth;
}

.animation img
{
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

I don't know if it's possible with CSS, but if it's possible, can you help me please ? What's wrong with my code ?

TIA !

Upvotes: 0

Views: 669

Answers (1)

John
John

Reputation: 5335

I would approach it with CSS like this, not HTML

.animation
{
  background: url(https://www.w3schools.com/html/pic_trulli.jpg) no-repeat;
  display: inline-block;
  width: 500px;
  height: 500px;
  transition: background-position .5s ease-in-out, 
    color .5s ease-in-out;

}

.animation:hover, .animation:focus {
  background: url(https://www.w3schools.com/html/img_girl.jpg) no-repeat;
  background-position: 0 100%;
  display: inline-block;
  width: 500px;
  height: 500px;;
}
<div class="animation">
   <a href="#baguette" class="france">
      <img alt="" id="france"/>
   </a>
</div>

Upvotes: 1

Related Questions