CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Curnelious
Curnelious

Reputation: 1

A simple container structure

Coming from mobile programing I get used to create some parent hidden view, and position inside it subviews. Trying to do the same with html/css/Bootstrap.

Say I already layout some cover background photo :

  <div class="openBackContainer">
         <img  src="images/Back.png" alt="l" />
  </div>

Now, I would like to create some squared hidden container in the middle of this cover, which has a title and a button to upload photos :

enter image description here

As you can see I want to add a "virtual/hidden" container in the middle of the cover, then inside align a title and button. (later this button will use a bootstrap class)

What would be a good practice to create this container inside a cover photo?

Upvotes: 1

Views: 144

Answers (1)

Itay Gal
Itay Gal

Reputation: 10824

First, use a container that takes 100% of the page and set its background image for your cover. Then you can use flex to center your inner div - it will be transparent by default.

body,
html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.container {
  width: 100%;
  height: 100%;
  background-image: url("https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hidden {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.txt{
  color: white;
  font-size: 24px;
  margin-bottom: 20px;
}

.hidden button {
  background-color: red;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  border: 0;
}
<div class="container">
  <div class="hidden">
    <div class="txt">Upload Photos</div>
    <button>+</button>
  </div>
  <div>

Upvotes: 2

Related Questions