I'm trying to create the image in the link with only html and css. There are a number of elements that would need to "stack" on top of one another. I am having a difficult time understanding inheritance, nesting, etc. Here's the code I've written so far: .heart { position: relative; margin-top: 20px; background-color: #000000; opacity: .8; width: 65px; height: 30px; border-radius: 15px; display: inline; } .box { margin: 75px auto; position: relative; height: 490px; width: 700px; background-color: #18a0ff; box-shadow: 1px 15px 50px 2px; display: flex; } .thumbnail_image { position: absolute; float: left; display: inline-block; top: 0px; left: 0px; } .text_container { top: 60px; left: 200px; right: 100px; width: 400px; height: 338px; position: relative; display: flex; } h1 { font-color: #ffffff !important; text-transform: uppercase; font-size: 60px; font-family: Montserrat; font-weight: 700; line-height: 1.1; text-align: left; } <div class="box"> <div class="heart"> </div> <div class="thumbnail_image"> <img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457298445/Sheldon_Pic_l3cprk.jpg"> </div> <div class="text_container"> <h1>Don't You think that if I were wrong, I'd know it?</h1> </div> </div> My concern is how to properly place the heart dialog, the text container, and the image overlay. I seem to be misunderstanding proper inheritance syntax or structure.

Stacking Elements/Classes with CSS

Reputation: 24712

Understanding the stacking order

In your case, the natural stacking order will do the job; this is nicely explained over on the MDN. The main thing to understand is that elements will overlap those that come before them in the markup. This is better explained with a simple example:

div {
  position: absolute;
  background: red;
  height: 100px;
  width: 100px;
  top: 0;
  left: 0;
}
.two {
  background: blue;
  top: 10px;
  left: 20px;
}
.three {
  background: green;
  top: 20px;
  left: 40px;
}

<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>

With that out of the way...

Let's make these!

Feel free to jump to the complete example at the end of this answer!

Want to use some pedantic semantics?

A <blockquote> element to wrap everything together in a semantic container.
A <nav> element to contain the back and forward navigation
A <cite> element that contains the name of the person quoted

Our markup now looks like this:

<blockquote>
    <p>Don't You think that if I were wrong, I'd know it?</p>

    <cite>Sheldon Cooper</cite> 

    <a href="#" class="love-counter">
      <3 123
    </a>  

    <nav>
      <a href="#">Previous</a> 
      <a href="#">Next</a>
    </nav>
</blockquote>

The CSS

Main background image and color

These can be placed as a background on the blockquote itself. You can use background-size to ensure that the image always has the same dimensions. (It will obviously distort images which have an incorrect size)

blockquote {    
    background: #18a0ff url(image-url) no-repeat;
    background-size: 170px 490px;
}

Add the transparent grey background and quotation character

This can be added with a absolutely positioned before pseudo-element of blockquote. The element is stretched out with left / right / bottom along with a width that matches the image. The transparent grey overlay and transparent text is provided by rgba color.

blockquote:before {
  content: '\201C';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  padding-top: 30px;
  font-size: 2.4em;
  text-align: center;
  background: rgba(0,0,0,0.7);
  width: 170px;
  color: rgba(255,255,255,0.3);
}

Align the main quote text along with its citation

In order to incorporate smaller quotes, it could be more visually pleasing to vertically center the main text. We can use the display: flex property along with justify-content to easily achieve this; the flex-direction: column property stacks the main quote over the top of the citation. The blockquote is also given left and right padding to appropriately position it horizontally.

blockquote {
  display: flex; 
  justify-content: center;
  flex-direction: column;
  padding: 0 140px 0 200px;
}

Position the back / forward navigation and love counter

These are easily located with position: absolute along with the appropriate left / right / bottom / top properties. They will look something like this:

.love-counter {
  position: absolute;
  right: 20px;
  top:  20px;
}

nav {
  position: absolute;
  left: 0px;
  bottom: 20px;
}

Complete example

Compatibility: IE 11+ and all modern browsers.

You might consider a javascript method to shrink the font size for larger quotes.

@import url(https://fonts.googleapis.com/css?family=Passion+One:400,700);
 html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
blockquote {
  background: #18a0ff url(https://i.sstatic.net/e3nDc.jpg) no-repeat;
  background-size: 170px 490px;
  height: 490px;
  color: #FFF;
  font-family: 'Passion One', cursive;
  font-size: 4.2em;
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 0 140px 0 200px;
  font-weight: 400;
  line-height: 1;
  width: 650px;
  text-transform: uppercase;
}
blockquote p {
  margin: 0;
  margin-top: 0.75em;
}
cite {
  font-size: 0.25em;
  font-weight: 400;
  margin-top: 2em;
}
cite:before {
  content: '\2014  '
}
blockquote:before {
  content: '\201C';
  font-size: 2.4em;
  padding-top: 30px;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
  width: 170px;
  color: rgba(255, 255, 255, 0.3);
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}
.love-counter {
  color: #FFF;
  text-decoration: none;
  font-size: 0.2em;
  position: absolute;
  right: 20px;
  top: 20px;
  font-family: helvetica;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.2);
  padding: 0 10px;
  border-radius: 10px;
  height: 30px;
  line-height: 30px;
  min-width: 60px
}
nav {
  position: absolute;
  left: 0px;
  bottom: 20px;
  font-size: 0;
  width: 170px;
  text-align: center;
}
nav a:before,
nav a:after {
  font-size: 36px;
  width: 50%;
  display: inline-block;
  color: #FFF;
}
nav a:first-child:before {
  content: '<';
}
nav a:last-child:after {
  content: '>';
}
.x-large {
  background-image: url(https://i.sstatic.net/qWm5m.jpg);
}
.x-large p {
  font-size: 0.62em;
}

<blockquote>
  <p>Don't You think that if I were wrong, I'd know it?</p>

  <cite>Sheldon Cooper</cite> 

  <a href="#" class="love-counter">&#60;3 123</a>

  <nav>
    <a href="#">Previous</a> 
    <a href="#">Next</a>
  </nav>
</blockquote>

<h2>Larger quote</h2>

<blockquote class="x-large">
  <p>Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.</p>

  <cite>Albert Einstein</cite> 

  <a href="#" class="love-counter">&#60;3 123</a>

  <nav>
    <a href="#">Previous</a>
    <a href="#">Next</a>
  </nav>
</blockquote>

Upvotes: 0

boone-king

Reputation: 25

html,
body,
box,
thumbnail_image,
overlay,
h1,
h3,
h6,
p,
body {
  width: 100%;
  padding-bottom: 25px;
}
input {
  font-family: "Roboto";
  position: absolute;
  top;
  25.5px;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  background-color: transparent;
  text-align: right;
  border-width: 0;
  width: 100%;
  margin: 0 0 .1em 0;
}
.heart_button {
  position: absolute;
  top: 25.5px;
  right: 55px;
}
heart_button:hover,
heart_button:active,
heart_button:focus {
  color: #dd0239;
}
.heart_background {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: #000000;
  opacity: .1;
  width: 65px;
  height: 30px;
  border-radius: 15px;
}
.box {
  margin: 30px auto;
  position: relative;
  height: 490px;
  width: 700px;
  background-color: #18a0ff;
  box-shadow: 1px 15px 50px 2px;
}
.quote_image {
  position: absolute;
  opacity: .1;
  top: 62px;
  left: 51px;
}
.image_overlay {
  background-color: #282a37;
  width: 170px;
  height: 490px;
  position: absolute;
  float: left;
}
.thumbnail_image {
  position: absolute;
  float: left;
  opacity: .12;
  display: inline-block;
  top: 0px;
  left: 0px;
}
.text_container {
  left: 200px;
  width: 400px;
  height: 338px;
  position: absolute;
}
h1 {
  color: #fff;
  text-transform: uppercase;
  font-size: 60px;
  font-family: Montserrat;
  font-weight: 700;
  line-height: 1.1;
  text-align: left;
}
.author_name {
  position: absolute;
  left: 206px;
  bottom: 0px;
}
h3 {
  font-family: Open Sans;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 14px;
  text-align: left;
  color: #fff;
}
p {
  font-family: "Roboto";
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  text-align: center;
}
h6 {
  font-family: Open Sans;
  font-weight: light;
  font-size: 22px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
}
html {
  background: linear-gradient(209deg, #E5ECEF 40%, #BBC2C5 100%) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#footer {
  clear: both;
}

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>

</head>

<body>
  <div class="box">
    <div class="heart_button">
      <img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457311522/little_heart_jle1j3.png">
    </div>
    <div class="heart_background">
    </div>
    <div class="image_overlay">
    </div>
    <div class="thumbnail_image">
      <img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457298445/Sheldon_Pic_l3cprk.jpg">
    </div>
    <div class="text_container">
      <h1>Don't You think that if I were wrong, &nbsp;&nbsp;&nbsp; I'd know it?</h1>
    </div>
    <div class="author_name">
      <h3> - Sheldon Cooper </h3>
    </div>
    <div class="quote_image">
      <img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457314397/quotations_image_wfwimc.png">
    </div>

  </div>
</body>

<footer>
  <div>
    <h6>A Project by Charles Bateman</h6>
  </div>
</footer>

Upvotes: 0

maxwell

Reputation: 2381

Absolute positioning and z-index are the key words involved in stacking images with HTML and CSS.

I went ahead and mocked up your image with some html/css to give you an idea of implementation.

Z-index is not relevant in this particular example since you only require one layer above the base, which is automatically given to you with absolute positioning, however if you had multiple layers you would need to set the z-index to a number value where lower numbered z-indexes appear at the bottom and higher z-indexes appear at the top.

Here's my code, hope it helps:

body {
  background-color: grey;
}

.container {
  position:fixed;
  height: 500px;
  width: 700px;
  background-image: url(https://i.sstatic.net/MS8X8.png);
  background-position: 46% 52%;
  background-size: 150%
}

.hearts {
  position: absolute;
  background-color: rgba(149, 165, 166,.5);
  color: white;
  right: 40px;
  top: 15px;
  padding: 15px 25px 15px 25px;
  border-radius: 15px
}


.blue {

  width: 550px;
  height: 500px;
  background-color: rgb(102,173,255);
  float: right;

}

h1, h5 {
  position: absolute;
  font-family: sans-serif;
  color: white;
  text-transform: uppercase;
}

#quote {
left: 200px;
top: 30px;
font-size: 60px;
}

#attr {
  left: 200px;
  top: 450px;
}

<!DOCTYPE html>
<html>
  <head>
    <link rel = "stylesheet" href = "main.css">
  </head>
  <body>
    <div class = "container">
      <div class = "hearts">423</div>
      <div class = "blue">
        <h1 id = "quote">don't you <br> think that <br> if i were </br>wrong,<br> i'd know it?</h1>
        <h5 id = "attr">-Sheldon Cooper</h5>
      </div>
    </div>
  </body>
</html>

Upvotes: 2