A quick and easy guide to making social links that pop!
Step 1 — Find an image and upload to your React App file
Find an icon image file (preferably high definition, transparent background etc), and select the image size that best suits the needs of your design. Then download the image file and place it in the “src” file of your React app file. For my icon images, I used IconFinder.
Step 2 — Import the image into App.js and create an <img> HTML tag
Import the image file into the App.js file and give it an alias following the syntax below:
Then create an image tag in the HTML body of App.js. The “src” attribute of the <img> tag will be the alias that you gave the file when you imported it. It should look something like this:
Step3 — Wrap the <img> tag in an <a> tag
If we wrap the <img> tag in an <a> tag, we can then provide the “href” attribute a website to link our users to.
Step 4 — Give the image a className attribute
Right now, our social media icon is just a static image on a page that acts as a link. Pretty boring stuff! By attributing a className to the <img> tag, we can manipulate the element’s styling in CSS and make it animated and interactive!
Step 5 — Manipulate styling in CSS!
Now that we have a className attribute set for the <img> tag, in the CSS file we can call “social-img-link” and add styling.
To add the hover animation as seen in the demo above, you can add a transition styling element to .social-image-link that activates on the hover, and adds “drop-shadow” to the image. In order to do this, in your CSS file you have to call the className once more and add “:hover” at the end. Then add the specific style selectors that you want to see when the image is hovered over.
The “hover” selector can be used to create conditional styling that only becomes active when an element is hovered over by the user’s cursor.
Further Reading
I used React Codesandbox for examples.
