100 Days of CSS: Day 12

Tooltip: I'm quite sure, you already know what obsession means. But you can look it up anyways.

Unsplash ↗

Project Structure

The project consists of 2 main files:

• index.html - the HTML structure.
• style.css - for styling.

HTML Structure

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere erat at mi sagittis ultricies. Aenean cursus libero vitae odio congue volutpat.

<div class="frame">
	<div class="quote">
		<p>I know quite certainly that I myself have no special talent; curiosity
			<span onclick="void(0);" class="tooltip">
				obsession
				<span class="info">
					<span class="pronounce">
						əbˈseʃ(ə)
						<span class="fa fa-volume-up"></span>
					</span>
					<span class="text">
						<b>Obsession</b>, a persistent disturbing preoccupation with an often unreasonable idea or feeling.
					</span>
				</span>
			</span>
			and dogged endurance, combined with self-criticism have brought to me my ideas
		</p>
		<p class="author">Albert Einstein</p>
	</div>
</div>

CSS Styling

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere erat at mi sagittis ultricies. Aenean cursus libero vitae odio congue volutpat.

@import url(https://fonts.googleapis.com/css?family=Open+Sans:600,400,300,300italic);

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.3);
  background: #4CB6DE;
  color: #fff;
	font-family: 'Open Sans', Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.quote {
	position: relative;
	margin-top: 90px;
	padding: 0 30px;
	
	&:before {
		display: block;
		position: absolute;
		z-index: 0;
		content: '„';
		font-family: Arial;
		font-size: 250px;
		color: #6AC2E3;
		line-height: 35px;
		top: -100px;
		left: 7px;
	}
	
	p {
		position: relative;
		z-index: 1;
		font-size: 24px;
		line-height: 35px;
		margin: 20px 0;
	}
	
	.author {
		font-weight: 300;
		font-style: italic;
		font-size: 20px;
		line-height: 28px;
	}
	
	.tooltip {
		position: relative;
		display: inline-block;
		background: #286F8A;
		padding: 0px 8px 5px 8px;
		margin: -10px 0;
		cursor: pointer;
		
		&:hover .info,
		&:focus .info {
			visibility: visible;
			opacity: 1;
			transform: translate3d(0,0,0);
		}
		
		.info {
			box-sizing: border-box;
			position: absolute;
			bottom: 53px;
			left: -85px;
			display: block;
			background: #286F8A;
			width: 300px;
			font-size: 16px;
			line-height: 24px;
			cursor: text;
			visibility: hidden;
			opacity: 0;
			transform: translate3d(0,-20px,0);
			transition: all .5s ease-out;
			
			&:before {
				position: absolute;
				content: '';
				width: 100%;
				height: 14px;
				bottom: -14px;
				left: 0;
			}
						
			&:after {
				position: absolute;
				content: '';
				width: 10px;
				height: 10px;
				transform: rotate(45deg);
				bottom: -5px;
				left: 50%;
				margin-left: -5px;
				background: #286F8A;
			}
			
			.pronounce {
				display: block;
				background: #fff;
				color: #286F8A;
				padding: 8px 17px 10px 17px;
				line-height: 16px;
				
				.fa {
					position: relative;
					margin-left: 10px;
					top: 1px;
					cursor: pointer;
					transition: all .2s ease-out;
					
					&:hover {
						transform: scale(1.15) translate3d(0,0,0);
						backface-visibility: none;
					}
				}
			}
			
			.text {
				display: block;
				padding: 13px 17px;
			}
		}
	}
	
}

Reflection

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere erat at mi sagittis ultricies. Aenean cursus libero vitae odio congue volutpat.