Profile Image Hover Effect | HTML CSS Tutorial

In this video I go over how to create this profile image hover effect using only HTML and CSS. I was inspired by the profile hover effect I saw on JIRA and wanted to recreate it with HTML and CSS. I show you the full front end coding tutorial, where I create the structure of the elements in HTML and then write all of the styling and effects with CSS. I use Flexbox for the layout and then add hover effects.

In this video I show you:
0:00 - Intro
0:33 - Starting HTML Code
1:10 - HTML Code
2:20 - CSS Code
6:31 - Hover Effect

--

Gear

--

Let's Connect

--

DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!

[amongdoomers]

This is so good. Why are you so underrated 🥺?

[riaz]

I like this hover effect, it seems your video will improve my CSS skills.

[geryardmon]

You are phenomenal!!! your content is so light and delightful...Am getting addicted to your presentation <3 Thank you Angela

[EmmanuelNgwandu]

here I was wondering how to get that Mac-like bottom navigation menu and here it is!! thanks

[kasunjayakodi]

Always enjoy your tutorials.
One request ! Could you please make a video how to make same hover effect using figma. Thank u.

[tbf]

This was a great video. Thanks for providing great information!

[Esau_]

He genial estoy aprendiendo desarrollo web y tu video esta genial. Gracias

[jiteshchoudhary]

That one line about z-index, cleared my concept about it. Could you make a vdo about all the tags and properties of css, and what are their results.

[jiteshpatil]

Really cool videos....keep posting such amazing videos

[don.geo.thayyil]

That was really great. Thank you so much.

[mustafawagih]

I love your accent. say it one more time!
"In this videoooo..." :D :D
it's like your signature :D

[sushrutm]

Hey Angela, could you please make a video on coding hybrid mobile apps using HTML CSS and JS and how to go about launching it. (Just an overview)

I absolutely love the production quality of your videos and the way you present. Would like to hear your perspective on the subject.
Have a nice day! :)

[PANKAJ-bxms]

@0:28 organisation of multiple scss files

[hollengrhen]

I don't like tutorial with css frameworks.