How we can create inline text to grid layout using HTML & CSS? Solution: CSS Text To Grid Layout On Hover. In Other Words, Inline Texts Change to Grid View On Mouse Hover.
Maybe you have seen text to grid layout view on some websites. Mostly on categories or options section, developers use these kinds of text to grid layout. You can see on websites there are many categories or options available in text layout, but when you have on those they become a box. Basically, this is called text to the grid layout.
Today you will learn to change text view to grid view using Pure CSS & HTML. You can use this in your services, categories, tags, etc’s section, they will visible with normal inline text layout but when any user will hover on it then it will expand to the grid. I think this will be very useful for your current or next project or website.
So, Today I am sharing CSS Text To Grid Layout on Hover. Basically, this program is to change the view of inline text to grid view on mouse hover. This is a very short program, & easy to understand for beginners also. You can use this on multi places. This is a CSS display flex based design, you can also call this text to the grid using flex.
If you are thinking now how this text to grid actually is, then see the preview given below.
Preview Of Inline-Text To Buttons Using Flex
See this video preview to getting an idea of how this hover program looks like.
Now you can see these visually. If you like this, then get the source code of its.
You Also May Like:
- Stylish Checkbox With Animated Tick
- CSS Text Direction Fill On Hover
- HTML CSS Glitch Effect
- Pure CSS Tabs With Responsive Design
CSS Text To Grid Layout On Hover Source Code
Before sharing source code, let’s talk about this. Basically, First I created a main div then I created multiple divs with the same class name, & put text inside the divs. I used a google font (get) that’s why I put In CSS section font family on the body. In my case, I take the class name for the main div class= "main", & for all text divs, I put the class name class= "text" .
In the main class, I put 38vw height If you don’t know about VW unit, this is based on the port width. Also, I put the flex display & flex-wrap properties. Basically, I put small units of size & width for first, these will expand on hover. The put comma after every text or divs expects the last one. I put a full stop on the last text using last-child.
On hover, I put the main class width 85vw, its mean 85% of the viewport. & increases the font size, put background color & changed the text color. After that, I also hide all commas & full stop. Now its create the text to grid layout hover.
For creating this program you have to create only 2 files. One for HTML, & one for CSS. Follow the steps to creating this without any error.
index.html
Create an HTML file ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <!-- code by webdevtrick ( https://webdevtrick.com) --> <html> <head> <meta charset="UTF-8"> <title>CSS Text to Grid | Webdevtrick.com</title> <link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="main"> <div class="text">HTML</div> <div class="text">CSS</div> <div class="text">JavaScript</div> <div class="text">jQuery</div> <div class="text">jQuery UI</div> <div class="text">React</div> <div class="text">Angular</div> <div class="text">Node JS</div> <div class="text">Vue Js</div> <div class="text">PHP</div> <div class="text">MySQL</div> <div class="text">SQLite</div> <div class="text">Mongo DB</div> <div class="text">MariaDB</div> <div class="text">phpMyAdmin</div> </div> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ & put these codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
/** code by webdevtrick ( https://webdevtrick.com) **/ body { font-family: 'Anton', sans-serif; } .main { display: flex; width: 38vw; padding: 3em; flex-wrap: wrap; transition: all .25s linear; font-size: 2vw; } .main .text { outline: 1px solid transparent; padding: .25em 0; min-width: 2.85em; transition: inherit; text-align: center; color: #333; } .main .text:after { content: ', '; transition: inherit; width: .5em; overflow: hidden; height: 1em; margin-bottom: -.15em; text-align: left; display: inline-block; } .main .text:last-child:after { content: '.'; } .main .text:hover { background: #333; color: #f05855; cursor: pointer; } .main:hover { width: 85vw; } .main:hover .text { min-width: 8em; padding: 2em 0; } .main:hover .text:after { width: 0; } |
That’s It. Now you have successfully created CSS Text to Grid View or Layout on Hover. In other words, Inline texts becomes grid on mouse hover using pure CSS. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
i am a beginner and i have coded my e-commerce website Iwinesa.com the problem i have is how to items in 4 column grid and 7rows. i would like to place the combo box next to add-to-cart button the image above that.please advise how do i do that.
thank you
edmond