An uncomplicated vessel design

Having experience in mobile programming, I am accustomed to creating a parent hidden view and positioning subviews inside it. Now, I am trying to replicate the same functionality using HTML/CSS/Bootstrap.

Let's say I have already laid out a cover background photo:

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

Now, I want to add a hidden square container in the center of this cover, which will contain a title and a button for uploading photos:

https://i.sstatic.net/TedMN.png

Essentially, I aim to insert a "virtual/hidden" container into the middle of the cover image and then align a title and button inside it. (Later on, this button will utilize a Bootstrap class)

What would be a best practice for creating this container within a cover photo?

htmlcsstwitter-bootstrap

Answer №1

To start, create a container that spans 100% of the page and incorporate a background image for your cover. Next, utilize flex to centrally position your inner div - it will maintain transparency 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be preventing the fill color of my SVG from changing when I hover over it?

I am currently utilizing VueJS to design an interactive map showcasing Japan. The SVG I am using is sourced from Wikipedia. My template structure is illustrated below (The crucial classes here are the prefecture and region classes): <div> <svg ...

javascripthtmlsvgvue.js

Resize lowercase letters to fit the box model

Currently, I am in the process of enhancing the python word cloud library available here by adding an HTML export option alongside the existing image export feature. The main challenge I'm facing right now is related to how the underlying python imag ...

htmlcssfontswebfonts

What is the best way to reduce a varying percentage as the value continues to rise?

My memory of math may be a bit fuzzy, but I can't seem to recall how to solve this particular issue. In jQuery, I have been adding randomized clipping paths to my images using the following code: var max=100; var spread=5; jQuery.each( $("img"), func ...

jquerycssmath

Is it necessary to include the Roboto font when using MUI?

After reviewing the Material UI documentation, it appears that users are responsible for loading the Roboto font: Material UI is designed to use the Roboto font by default. You may add it to your project with npm or yarn via Fontsource, or with the Googl ...

cssreactjsmaterial-uifontsroboto

MUI provides the flexibility to adjust the opacity separately for Chip labels/icons and backgrounds

My objective is to customize the opacity of label/icon and background in MUI Chip. I want the label & icon to have an opacity of 1, while the background should have an opacity of 0.0571. Technologies used in this project include React, TypeScript, Materia ...

cssreactjstypescriptmaterial-uiopacity

Text in d3.js vanishing while undergoing rotation

I have been struggling for hours with what seems like a simple problem and haven't made any progress. I'm hoping to receive some valuable advice from the brilliant minds on stackoverflow. You can view my demo at I attempted to use jsfiddle to s ...

javascriptjqueryhtmld3.jstext-rotation

Leverage the power of DOMXPath in combination with the query function

Here is a snippet of HTML code to work with: <ul id="tree"> <li> <a href="">first</a> <ul> <li><a href="">subfirst</a></li> <li><a href=""> ...

phphtmlxpathdomdocument

What's the best way to position menu items vertically in a navbar?

I've been struggling to vertically center the menu items "TEST 1","TEST 2" and "BRAND" within the navigation bar without any luck. I've experimented with vertical-align, margin-top, and bottom properties. What I'm aiming for is to have them ...

htmlcsstwitter-bootstrap-3

Guide to aligning Material UI card in the center (React)

I've been struggling to find a solution for centering a Material UI card in React. Any assistance would be greatly appreciated! Thank you :) link to image on website <Grid container justify="center"> <Card s ...

cssreactjsmaterial-ui

Is there a way to keep Angular from automatically re-sorting my list when I make edits to it?

I have designed a small application with Angular for managing Todolists. Each list contains multiple todos, where each todo has attributes such as name, value1, and value2. To automatically sort each list using Angular, I utilized ng-repeat="todo in selec ...

javascripthtmlangularjsjavascript-databinding

Tips for resizing a Shiny Dashboard to accommodate various screens

I created a shiny app with a specific layout on my desktop computer that fits perfectly on the screen. However, when I run the app on my notebook, only the top left boxes are visible, making the app too large for the screen. Even after resizing with Ctrl ...

cssrshinyshinydashboard

What is the best way to verify HTML using RSS?

Looking to improve my skills in HTML/CSS/PHP development, I'm faced with a challenge when it comes to validating code that contains content beyond my control, such as an RSS feed. For instance, on my home page, which is a .php document containing bot ...

phphtmlcssvalidation

Storing toggle values (on/off) in a PHP database for future reference

I'm trying to use toggle buttons to save responses in a database as 'yes' or 'no'. However, for some reason the only response I am receiving is 'on', even when I switch off the button. I've searched for solutions but ...

phpjqueryhtmlajax

What is the best way to include both left and right borders in HTML/CSS

I'm looking to add left and right borders to a specific cell within my table. Utilizing Bootstrap 4 beta, I attempted the following code snippet: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="style ...

htmlcssbootstrap-4

Issue with Jquery .on() causing toggleClass function to not trigger

Adding a column dynamically to a table on click with JS/Jquery is achieved as demonstrated below $("#btn").click(function(){ $('#week_title').append('<th>Week '+count+'</th>'); count++; $('.tag&ap ...

javascriptjqueryhtml

Are there alternative methods to retrieve the CSS properties of web elements more effectively than relying on selenium?

I have a situation in my code where I need to retrieve the CSS properties of a large number of web elements. Currently, I am using Selenium and the code looks like this: ... node = browser.find_element_by_xpath(xpath_to_node) return {k: node.v ...

pythonjquerycssseleniumautomated-tests

stepper vue with previous and next buttons

I am trying to create previous and next buttons in Vue, but I am struggling a bit because I am new to learning Vue. I have some methods like this.activeIndex < this.activeIndex - 1 that I need to implement. Can someone help me with how to do this? cons ...

javascripthtmlvue.jsvue-componentstepper

Error in JavaScript Slideshow

I am attempting to create a slider that changes with a button click. Below is my JavaScript code: var img1=document.getElementById("p1"); var img2=document.getElementById("p2"); var img3=document.getElementById("p3"); function slide(){ ...

javascripthtmlcssuser-interfaceslider

Encountering blank space in the first table row after a page break when creating a PDF using dompdf

Encountered a strange bug while working with dompdf for PDF generation. The issue arises when a page break occurs within a table. Subsequent to the break, the first tr on the next page displays an odd empty space on the left side (as depicted in the image ...

phphtmlcsspdfdompdf

A foolproof guide to effortlessly incorporate an image into your banner while ensuring its perfect alignment even with varying screen widths

I'm facing an issue with adding a photo to the banner on my webpage. Currently, the photo remains in the same position within the banner regardless of screen size. However, I want it to stay right above my logo even when the screen size changes. How c ...

htmlcss