0

Consider the following HTML:

<div class="link-container">
    <a class="link" href="workshops.php">More workshops</a>
    <img src="arrow.png">
</div>

Expected outcome:

  • the a element text moves a little to the left on hover and shows the img element, on the right side of the a element
  • only the text moves on the left while hovering
  • the image fades in

How do I achieve this?

Antonino
  • 3,178
  • 3
  • 24
  • 39
Ali Shahid
  • 61
  • 6

1 Answers1

2

This is the snippet that does the job you are asking for 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

div:hover 
{
    left: -10px;
    position: relative;
}

a{
    position: relative;
    padding-left: 20px;
}

a:after {
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAPFBMVEX///8AAABxcXEGBgaamprS0tLPz89aWlpWVlbT09NRUVFVVVVZWVldXV1OTk7W1ta2traWlpZGRkaCgoJyyOvBAAACf0lEQVR4nO3dC3KCMBhFYf8+1L5sbfe/14ZxmIoIJLE2vdfzbaCcCY8gkK5WAAAAAAAAAAAAAAAAAAAAAAAAaOpj3XoLrm0fm8fW23BdDxHx/N56K66pKwzrcTwURrzZHo99oW/jT2HE1nJfPS5M55yn1tvz+4aFjvvqaWFqNNtXx4Vu145zhV5zgPOFEa824zhV6HPOmS50aZwr9JgDzBc6zAGWCvX31eVC9TlATqH2HCCvMGInOwfILdSdA+QXqp5zSgo1G8sKI17kro+lhXpzgPLCdM6R2ldrCi+bA9z9sc+qwkvGsfIPNrCrPB7vW294gbp7K6XCNF+t2Fe1CmvmAGqF6fpYuK/qFaZzTlGjYmHZtUOzsOSco1qYP466hbnHo3JhurfKGEftwpzjUb1wuVG/MM0BZhsdCufvOzwK033H5Di6FE4fjz6FU+PoVHj+ePQqPDcHcCscH49+haeNjoXDOYBn4fF9h2vhz7XDt7C/R3YuPFw7vAsjvswLt+Zj6H4cup9Ld2vv6+Hxsw3HQvd56elv4W6F4+fEXoXu9/juv9O4/9Y2/azNo3DuOZtD4fwzNv1C92dP7s8Pp5/HeBTmvcunW+j+Lob7+zTu70S5v9f2Yv5uovv7pe7vCOdc38dab3W+2u/1/L+3+Gt138zUHH+t1BQq9dUUll3f2+P7wyH3b0i1jr8e33L3dNfkyStUHb8O62Jor4nRWVyfRrxvqbD0/v0/uuV1ojz6bne9Nt3r+9gtrpvocvz1Tgu9xq8zLNS7v102WEfYsG+wFrTd/nlwK+t5byz3zwP/dfX31uPX8f//FgAAAAAAAAAAAAAAAAAAAAAAAP/cN+LxOzmMTdyOAAAAAElFTkSuQmCC);
    display: block;
    position: absolute;
    left: 234px;     
    top: -30px; 
    opacity: 0;
    transition: opacity 0.1s ease-out 0s;    
}

a:hover:after {
    transition: opacity 1.5s ease-out 0s;
    opacity: 1;
}

</style>
</head>
<body>

<div class="link-container">
    <a class="link" href="workshops.php">More workshops</a>
</div>  

</body>
</html>

NOTE: you can tweak on the transition values to set the fade in and fade out as you prefer, according to the following syntax [nice reference here]:

transition:<property> <duration> <timing-function> <delay>;
Dharman
  • 30,962
  • 25
  • 85
  • 135
Antonino
  • 3,178
  • 3
  • 24
  • 39
  • Awesome! I would love the image to fade in and only the text moving to the left when you hover! – Ali Shahid Dec 16 '18 at 00:40
  • hello again! I edited the code according to your comment. A few things: in order to avoid downvotes next time please show your attempts in solving the task you are proposing. Also, please list the requirements all together when you post the question, not after when people have already worked on the solution [I edited your question]. If this happens again I suggest you to open another question instead of adding specs later. A new question is a good practice also when the question has multiple problems with each of them deserving more attention [not your case here]. Enjoy the weekend! – Antonino Dec 16 '18 at 02:20