![image hover blocs app image hover blocs app](https://i.pinimg.com/originals/23/78/17/237817fd9f246c35fb26b783fd5616a2.gif)
The calc() function is used to calculate both of these positions.Menus Icon Bar Menu Icon Accordion Tabs Vertical Tabs Tab Headers Full Page Tabs Hover Tabs Top Navigation Responsive Topnav Navbar with Icons Search Menu Search Bar Fixed Sidebar Side Navigation Responsive Sidebar Fullscreen Navigation Off-Canvas Menu Hover Sidenav Buttons Sidebar with Icons Horizontal Scroll Menu Vertical Menu Bottom Navigation Responsive Bottom Nav Bottom Border Nav Links Right Aligned Menu Links Centered Menu Link Equal Width Menu Links Fixed Menu Slide Down Bar on Scroll Hide Navbar on Scroll Shrink Navbar on Scroll Sticky Navbar Navbar on Image Hover Dropdowns Click Dropdowns Cascading Dropdown Dropdown in Topnav Dropdown in Sidenav Resp Navbar Dropdown Subnavigation Menu Dropup Mega Menu Mobile Menu Curtain Menu Collapsed Sidebar Collapsed Sidepanel Pagination Breadcrumbs Button Group Vertical Button Group Sticky Social Bar Pill Navigation Responsive Header To make the background-colored block invisible before hovering over the anchor element, the background is given a negative background-position that places it to the left of the element, and thus, completely off the screen.Īfter hovering on the anchor, the block should move to the opposite side of the underline until it is completely offscreen again.
![image hover blocs app image hover blocs app](https://forum.blocsapp.com/uploads/db8018/original/2X/4/421354e7795d0953bc6b9f3b69bfd37ff7a95317.png)
This time, the width is set to be a fairly small 20px. While the height is set to the same size as the other backgrounds ( 2px in this example). The width and height are set by background-size. The first value for other background-* properties now also points to this newly added background-image. I’ll place this background on top of the other two by listing it first in the comma seperated value for background-image. What is better than 2 background? Three backgrounds! What is that block? You guessed it: another background. That space can be faked by moving a block with the same color as the background. The only thing missing is the space between the two lines. In other words, at the bottom… It’s at the bottom now. The line is at the top of the anchor element! Positioning it with background-position set to 0 100% places it at the left edge, and 100% from the top edge of the anchor element. So I stopped it from being naughty by setting background-repeat to no-repeat. This still ends up covering the entire background, because now it repeats over and over until it covers the entire background. The size of the background is limited in height and takes up the full width of the anchor element by setting the background-size to 2px and 100% respectively. Why am I using background-image and not background-color if I intend to use a solid color?īecause many properties to manipulate the background only work if background-image is used. The method I ended up using that met all of the requirements was: Using the background-image CSS property.Ī background-image can be a solid color by defining it as a linear-gradient that transitions from one color to the same color. There are many different ways to underline a piece of text. Links that wrap onto new lines should have the underline beneath all lines. The lines should not touch during this animation, leaving some space between them. GoalĪ colored underline beneath links that has a hover effect where the line retreats and is replaced by a differently colored line.
![image hover blocs app image hover blocs app](https://www.torrentmac.net/wp-content/uploads/2020/11/Blocs.jpg)
Image hover blocs app code#
The entire website is, from code to content. Not only the links on Cassie’s website are cool. The issue I ran into: Links on my blog often wrap to a different line and that means part of the link would not be underlined ?. The links there have this awesome effect when you hover over them: The underline retreats and gets replaced by a new one, leaving a bit of space between the two while the transition happens.
![image hover blocs app image hover blocs app](https://i.ytimg.com/vi/xOb3R8Xzt_A/maxresdefault.jpg)
I ran into some of these drawbacks when I wanted to “borrow” the styling from the links in a Cassie Evans blogpost. Unfortunately, they nearly always come with significant drawbacks. Complications quickly arise if you want to do anything fancier than the good ol’ CSS text-decoration: underline.