0

Hello guys I really need your help. I am a beginner in web development and recently I started making my first website using html, css i js. I want to put 2 images that will be hyperlinks in the center of the page (one on the left and one on the right). I want my GIFs to appear when i hover these two images(GIF starts when i hover over the image and ends when I unhover it). Also the GIFs will have text overlay and some other hover animations. Anything that can help me? here is the prototype(sketch) Thanks in advance,

Zisti
  • 3
  • 4
  • Welcome to Stack Overflow! Please consider sharing your code and explain what didn't work for you, so that others can help. – Ozgur Sar Dec 02 '20 at 19:44

2 Answers2

0

if it could be done!!

You can do it with CSS itself for example:

.classeOfMyImage{
 background: url('http://dummyimage.com/100x100/000/fff');
}
.classeOfMyImage:hover {
 background: url('https://media.tenor.com/images/1fe5b893dd6eb6905c4efabb103e6281/tenor.gif');
}

(I don't know how to link to another post because I'm new but they talk about it here CSS: Change image src on img:hover)

Gorka Rodriguez
  • 11
  • 3
0

Here is an example that will help you achieve your goal. You can also check it on codepen:https://codepen.io/assar777/pen/jOMbpeP

 <style>
    #image{
    background-image:url('https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg');
    height:400px;
    max-width:400px;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    }
    #image:hover{
    background-image:url('https://media.emailonacid.com/wp-content/uploads/2019/03/2019-GifsInEmail.gif');
    }
    </style>
    
    <div id="image"></div>
Ahmed Elassar
  • 48
  • 7