RiverLeaf design perspectives...

Attribute data-title center balance & content flow

Many thanks to FontAwesome for some awesome, unforgetable little images
Those of you who have a hard time peacefully wrapping thoughts around doing things sensibly, another way... take a break. Fontawesome is an awesome service for those with standard equipment, who write standard code. Not me? I decided to consider::after. Because the FontAwesome::before initially did not work so well with the robust system calls for the data-title attribute.

Got a note from someone at Codepen to say their site is clear now, but these are some interesting things that data-title does here (and everywhere). For example, did you know that it is possible to create navigation without element a, but using data-title to navigate between links? Fun stuff, mocassins.

Codepen: Attribute data-title vertical balance type granularity (https://codepen.io/Riverleaf/pen/qwbrLm)

Consideration: .falogo::after{font:1rem; margin-left:-100%; margin-top:100%; top:1rem; transition: all;}
Typoography is of interest, because each character is an independent application, and not all fonts' applications are in balance around each system's unique data-title behavior. Data-title means application transport gateways function. The following notes reflect juggling character display and fontawsome inside Codepen... and on the desktop. Tricky fiddles, for front-end coders.

Can also use: top:2rem;, with another style behavior destabilizing Codepen display of this tooltip. Codepen frame'ing could be the problem. ...Attributes anchor position relative to specific element, herein the typography font app. Codepen api may show weakness here, due to corruption of tool-tip position: unlike on desktop, the large centered SVG icon font in codepen is not positioned correctly in Safari. .center{transition:inherit;} that sometimes helps style grouped features, no help. Codepen data-title fail on large icon is preceded and followed by correct tool-tip positioning. Class selector .center{font-size:5vmin;} presents no problem. Codepen api shows problems when font-size is larger: .center{font-size:85vmin;}. This suggests similar problems in similar environments, elsewhere. FontAwesome, other remote services may also be disrupting Codepen display of code. Front-enders can only sigh with relief, for those who maintain the frames in online design shops.


Works in Safari to provide one equal distance between tool-tip and tool-tip anchor for various anchor font sizes (example). Firefox Tor lags on top:1rem; and removes 2-3 vertical pixels as it eqully adjusts each data-title display's vertical spacing to reflect font-size and line-height for page! Enlarge .center{font-size: 85vmin;}: data-title positioning as expected is restricted by window sizes, including scroll-bars that ignore typographic viewport size in relation to scroll-bar display, for Safari. Method involves viewport adjustments to % and rem measure, in deploying typography apps. Each online font character represents a streamed app.


to make any image

Change image in CSS on hover

The image we will use for this demonstration, is a PNG of the Apple Symbol coded
as ⩍ in HTML5.

Perhaps the most popular and deeply appreciated CSS animation, for modern web designers, is the simple image swap (aka rollover). CSS creates an image space, displays one image there in the browser, then swaps that fisrt image with a second image, when user activity occurs. Most appreciated on today's Internet, the image swap occurs when a site visitor hovers over an image with a mouse. Coders often use the pageOpen stimulus, to swap images.

Image swap code

Tutorial Republic offers the traditional Standards compliant, very basic CSS image swap on hover.

.card { background: url("filepath/card-back.jpg") no-repeat; height: 195px; margin: 50px; width: 130px; }
.card:hover { background: url("filepath/card-front.jpg") no-repeat; }
<div class="card"></div>
This method has stopped working with some devices.

W3 Schools offers a rather complex How TO - Image Overlay Icon.

Head tag
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
.container { margin-left: 25vw; max-width: 50vw; position: relative; width: 100%; }
.image { display: block; width: 100%; height: auto; }
.overlay { bottom: 0; background-color: steelblue; background-image: url('ccaps.png'); background-size: 50vw 50vw; background-repeat: no-repeat; height: 100%; left: 0; opacity: 0; position: absolute; right: 0; top: 0; transition: 1s ease; width: 100%; }
.container:hover .overlay { opacity: 1; }
.icon { color: moccasin; font-size: 100px; left: 50%; position: absolute; text-align: center; top: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); }
.fa-user:hover { color: lightskyblue; }
<div class="imagespace" style="margin-left: 25%;" width="50%"></div>
<img src="logoBlue.png" width="50%"><br>
<img src="logoRed.png" width="50%">
<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">
  <a href="#" class="icon" title="User Profile">
    <i class="fa fa-user"></i>
This method works with most devices.

The image swap

Here is the current W3 Schools image swap on hover method. Hover over the image to see the effect.

Here are the images that we swap above...

The Link Family

CSS link cascade...