Hovering — Quick Guide on Hovering effect
The theme of the week of the weekly challenge from dailybitsofcode is:
Flex-grid with hover over transitions.
Let’s starts off with the basic concepts:
Flexbox layout:
A flexible box module which distributes items in one dimension(row or column).
Grid layout:
Row and columns layout set it up the content in containers. This one is two dimensional.
Hover:
An element selector when the mouse pases over.This one most come after :link and :visited, according to w3school , otherwise it won’t be effective.
Now that we have a better idea what each of these terms mean we are going to built a feature that will utilize technologies like HTLM and CSS.The feature of this module intends to reveal text on hover and it can be extended for many purposes. One common use is in portfolio sections when the user hovers over the project’s photo and it displays the link for more information.
Note: You can try challenging yourself building it with React :)
The HTML
Things we’ll need:
- container
- Three elements for the hover effect
Options container will layout the grid and each of child elements will be inside of the grid areas. each one has a class according to it’s section for purposes of styling. Each of the sections contains a IMG and H1.
The CSS
The plan for the styling is :
- .options-container will have a grid layout
- each child will be displayed inside a grid area
- text displays when image is hovered
step 1-
display: grid;
items are place in row to the full width of the container which in this case is set 50%.
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
This two track the value of width for each area of the grid. whereas the height is defined by the content. the ‘fr’ unit represents a fraction of the available space.
grid-template-areas
this way we name the grid lines which can be use as reference to position elements.
Step 2-
Each of the child element will be position with the property ‘grid-area.’ This property is set equal to the name we defined in the options-container class.
for instance the first grid are is option1 -> this one take up the upper left hand side space of the container. Whereas option3 takes whole half of the container.
One thing to notice is that elements inside of a grid can be layout as flex. This way we utilize to center items center .
So, if you ever wondered can i mix grid and flex?
— — — — -> answer is YES! 🙋🏻♀️
Step 3-
first take a look at h1 and img both have transitions. the transition formula is the following:
transition: property — duration — timing function- delay;
We can utilize the delay for timing the when to display the text once the image has scale and dim its opacity.
for this to happen we utilize hover on h1 & img and declare the change which in this case is opacity for both and scale for img.
More about
Project based modules with the aim to inspire and teach people along the learning curve as a developer.
The project is intended to create a weekly project which people can follow along and share the way they approached the code and how they solved it their creation by tagging @dailybitsofcode #weeklyCreationChallenge on instagram.
Happy coding!
