I am trying to recreate a cool look I saw on a graphic design mockup but I am unsure how to do it. There is a background video, with a transparent green overlay over it, then there is an image of a man that stays fixed to the right with text overflowing over it. For the most part I was able to recreate it but it still does not look right and the image does not stay fixed to the right side. Any suggestions or a different method would be appreciated.
Here is the mockup of the webpage I am trying to recreate in CSS:
Here is what I have managed to recreate using bootstrap:
*::before, *, *::after{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.jumbotron {
position: relative;
overflow: hidden;
background-color: black;
height: 70vh;
margin-bottom: 0;
}
.jumbotron video {
position: absolute;
z-index: 1;
top: 0;
width: 100%;
height: 100%;
/* object-fit is not supported on IE */
object-fit: cover;
opacity: 0.5;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
background: rgba(126, 154, 111, 0.5);
}
.jumbotron .container-fluid {
z-index: 3;
position: relative;
padding-right: 0 !important;
}
.image-holder {
width: 30%;
height: 100%;
}
.image-holder img {
width: 30%;
position: absolute;
top: -100px;
right: 0;
}
#heyGoodMeeting {
width: 80%;
z-index: 4;
}
.showcase__description {
color: white;
font-size: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Testing</title>
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="overlay"></div>
<video autoplay muted loop>
<source src="https://geniecast.com/wp-content/uploads/2020/10/Zuen-Office-Background-Video.mp4" data-src="" type="video/mp4">
</video>
<div class="container-fluid text-white d-flex justify-content-end">
<div style="width: 80%">
<img id="heyGoodMeeting" src="https://geniecast.com/wp-content/uploads/2020/10/Good-Meeting-Logo.png" alt="hey good meeting">
<div class="showcase__description">The personalized comedy event that will transform your next client gathering, holiday party, or company meeting from a typical zoom call into a customized, memorable, and hilarious experience.</div>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
<div class="image-holder">
<img src="https://geniecast.com/wp-content/uploads/2020/10/David-Header.png" alt="">
</div>
</div>
<!-- /.container -->
</div>
</body>
</html>
Here is a link to a jsFiddle
First of all, in your jsfiddle demo, it seems like you didn't include Bootstrap 4 but you tagged Bootstrap 4 in your question.
To style that person picture in the background, you can just do the same way you did on the video and the overlay: set its position to absolute, top, bottom and right to 0 so that it sticks on the right. I think the tricky part is to set its height to 100% so that it won't overflow its parent relative container.
Anyway, I've cleaned up the layout a little bit and assigned several custom CSS classes so that I can style those classes instead of directly on the elements:
<div class="jumbotron jumbotron-fluid banner">
<div class="overlay"></div>
<video />
<img src="https://geniecast.com/wp-content/uploads/2020/10/David-Header.png"
class="img-background" />
<div class="banner-content container-fluid">
<div class="showcase">
<img id="heyGoodMeeting"
src="https://geniecast.com/wp-content/uploads/2020/10/Good-Meeting-Logo.png"
class="img-fluid" />
<p class="description" />
<a class="btn btn-light btn-lg" />
</div>
</div>
</div>
And the following is the CSS to stick that person picture in the background:
.banner .img-background {
z-index: 3;
position: absolute;
top: 0;
bottom: 0;
right: 0;
height: 100%;
}
demo: https://jsfiddle.net/davidliang2008/xd2s630q/80/
Related
How do I add all the texts and buttons to display on the background img not below it?
Using Bootstrap 5.
<div class="container-fluid">
<div class="row landingPageBack img-responsive">
<img src="img/Landing.jpg" alt="">
<div class="text-center">
<h1>WELCOME</h1>
<h2>write me a msg</h2>
CONTACT ME
</div>
</div>
</div>
CUSTOM CSS
/* BG IMAGE*/
body html {
margin: 0;
padding: 0;
}
.landingPageBack {
background-image: url('img/Landing.jpg');
min-height : 100%;
min-width : 100%;
background-size: 100% 100%;
background-repeat:no-repeat;
overflow-y: hidden;
overflow-x: hidden;
}
/* BG IMAGE*/
.landingPageBack {
background-image: url('https://images.unsplash.com/photo-1637593755675-c38c18661a86?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1935&q=80');
background-size: cover;
background-repeat: no-repeat;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section class="landingPageBack">
<div class="vh-100 vw-100 d-flex justify-content-center align-items-center">
<div class="text-center text-white">
<h1>WELCOME</h1>
<h2>write me a msg</h2>
CONTACT ME
</div>
</div>
</section>
<!-- begin snippet: js hide: false console: true babel: false -->
Please check the code, Hope it will help you.
Here are some links you should go through:
https://getbootstrap.com/docs/5.1/utilities/flex/
https://getbootstrap.com/docs/5.1/utilities/sizing/#relative-to-the-viewport
Make the wrapped container div position: relative. Then you can place the image inside and a text Block element. The text-blockelöement must be position: absolute. With the css attribute top and left, bottom, right you can position the text on the image.
/* Container holding the image and the text */
.container {
position: relative;
text-align: center;
color: red;
font-size: 5rem;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<img src="https://via.placeholder.com/500/green" alt="Snow" style="width:100%;">
<div class="centered">Centered</div>
</div>
And for your example, you would only have to adjust your two classes a bit.
/* BG IMAGE*/
body html {
margin: 0;
padding: 0;
}
.landingPageBack {
position: relative;
}
.text-center {
position: absolute;
top: 50%;
left: 40%
}
.landingPageBack {
background-image: url('https://via.placeholder.com/500/green');
background-repeat: no-repeat;
background-size: 100%;
}
<div class="container-fluid">
<div class="row landingPageBack img-responsive">
<img src="https://via.placeholder.com/500/green" alt="">
<div class="text-center">
<h1>WELCOME</h1>
<h2>write me a msg</h2>
CONTACT ME
</div>
</div>
</div>
I have a div that surrounds a bootstrap form.
When I define a background-color to that div the background-color is not seen in the form.
ADD: I added the three major divs before the wrapper_form - div so that you get the full picture. Before the first major div there starts the body tag.
This is my code:
.wrapper {
min-height: 100%;
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0;
display: inline-block;
}
.main-wrapper {
height: 100%;
overflow-y: auto;
padding: 50px 0 0px 0;
}
.content {
position: fixed;
top: 50px;
bottom: 36px;
left: 0;
right: 0;
padding: 0 15px;
overflow:auto;
}
.wrapper_form {
background-color: yellow;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="main-wrapper">
<div class="content">
<div class="wrapper_form">
<div class="form-group form-inline">
<div class="col-md-4">
<label class="control-label">Input:</label>
</div>
<div class="col-md-8">
<input type="text" class="form-control" name="myInput" id="myInput" value="" />
</div>
</div>
</div>
</div><!-- /.content-->
</div><!-- /.main-wrapper -->
</div><!-- /.wrapper -->
.wrapper_form {background-color: yellow !important;}
Your inside elements are floated - try toggling the float property on the columns and you'll see the styling takes.
If you float the wrapper element it'll take the yellow background.
.form-group:after,.form-group:before{
clear:both;
content:'';
display:table;
}
.wrapper_form {
background-color: yellow !important;
}
Try this
I have bootstrap carousel working and the image is correctly resized when the window is made smaller. However, the surrounding container remains the same height it was when it was large.
This is because I have height: 380px in the .item css and max-height: 380px in the .carousel class.
Any attempt to set height: auto; or height: 100%; which I would expect, might allow the container/item to resize, results in the image disappearing entirely.
Any suggestions here is some simplified code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Carousel</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="css/carousel-SO.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- Carousel -->
<div class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="http://tips4java.files.wordpress.com/2008/10/screen-image.jpg" />
</div>
<div class="item">
<img src="http://fineartamerica.com/images/contestlogos/logo1-best-uplifting-image.jpg" />
</div>
<div class="item">
<img src="http://www.nerd-age.com/wp-content/uploads/2011/11/Forge-Quest-featured-image.gif" />
</div>
</div><!-- .carousel-inner -->
</div><!-- .carousel -->
</div> <!-- /container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('.carousel').carousel({
interval: 4000
});
});
</script>
</body>
</html>
and here's the CSS:
body {
color: #5A5A5A;
padding-top: 20px;
padding-bottom: 40px;
}
.carousel {
max-height: 380px;
max-width: 600px;
margin: 0 auto;
}
.carousel .item {
background-color: #777777;
width: 100%;
height: 380px;
}
.carousel-inner > .item > img {
float: none;
display: block;
margin-top: 40px;
height: auto;
top: 0;
position: absolute;
}
I basically want the grey area (.item) to resize with the picture.
Any help appreciated.
EDIT:
Here is a fiddle:
http://jsfiddle.net/7DGjk/
for some reason the carousel part doesn't work, but you can see the effect where the grey .item area doesn't resize.
Yeah Its possible. But no need to write too much of css codes for alignment. Here I use padding and background property for class item. Here the css
.item {
background: none repeat scroll 0 0 #808080;
padding: 5% 0;
max-width: 600px;
}
here the jsfiddle.
I have a problem with the cursor in IE10 any ideas? It doesn't appear at all in IE10.
http://jsfiddle.net/alexnode/y4y4A/8/
<div id="bgmbutton1">
<img id="button1" src="http://translationgames.org/images/button1overlay.png" alt="Translation games">
<img id="obutton1" src="http://translationgames.org/images/button1.png" alt="Translation games">
<div id="otrigger1" class="button" data-case="translation"></div>
</div>
css
#bgmbutton1{position: fixed;
left: 2%;
top: 5%;
}
#button1 {width: 25%;}
#obutton1 {width: 25%;position: absolute;top:0;left:0;}
#otrigger1 {background:rgba(0,0,0,0); height:100%; width:100%; position: absolute; left: 0; top: 0; cursor: pointer; z-index:5000;}
Your approach seems to be overcomplicating things just a bit. Might I suggest a slightly more straight-forward approach instead. I've tested this to ensure it works fine in IE.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hover-Fading Buttons</title>
<style>
.button {
width: 100px;
height: 100px;
display: block;
position: relative;
}
.button img {
border: 0;
width: 100%;
top: 0; left: 0;
position: absolute;
transition: opacity .5s;
}
.button:hover .default {
opacity: 0;
}
</style>
</head>
<body>
<a class="button" href="#">
<img class="overlay" src="http://translationgames.org/images/button1overlay.png" alt="Translation games">
<img class="default" src="http://translationgames.org/images/button1.png" alt="Translation games">
</a>
</body>
</html>
As you can see, this does rely on the transition and opacity properties. If you require support for older browsers, you could go back to a JavaScript approach using jQuery:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hover-Fading Buttons</title>
<style>
.button {
width: 100px;
height: 100px;
display: block;
position: relative;
}
.button img {
border: 0;
width: 100%;
top: 0; left: 0;
position: absolute;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.js"></script>
<script>
$(function () {
$(document).on("mouseover mouseout", ".button", function () {
$(this).find(".default").stop().fadeToggle(300);
});
});
</script>
</head>
<body>
<a class="button" href="#">
<img class="overlay" src="http://translationgames.org/images/button1overlay.png" alt="Translation games">
<img class="default" src="http://translationgames.org/images/button1.png" alt="Translation games">
</a>
</body>
</html>
I hope this helps you.
<style type="text/css">
div.imageSub { position: relative; }
div.imageSub img { z-index: 1; }
div.imageSub div {
position: absolute;
left: 15%;
right: 15%;
bottom: 0;
padding: 4px;
}
div.imageSub div.blackbg {
z-index: 2;
color: #000;
background-color: #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: 0.5;
}
div.imageSub div.label {
z-index: 3;
color: white;
}
</style>
<body>
<div class="imageSub" style="width: 300px;"> <!-- Put Your Image Width -->
<a href="../../../Downloads/Unnamed Site 2/stem studio.html"><img
src="../../../Downloads/Unnamed Site 2/PIC.jpg" alt="Something" width="300"
height="437" /></a>
<div class="blackbg">Hello</div>
<div class="label"> The Wolf</div>
</div><br />
<div class="imageSub" style="width: 300px;"> <!-- Put Your Image Width --><img
src="../../../Downloads/Unnamed Site 2/PIC.jpg" alt="Something" width="300" height="437"
/>
<div class="blackbg">Hello</div>
<div class="label"> The Wolf</div>
</div>
</body>
</html>
</body>
</html>
I am trying to align the two div images horizontally.
I borrowed the code for overlaying text on images from this website :
I just added a random pic and text to see if this code works, It works like perfectly well, but they come out vertically. How do I align them horizontally ? Will appreciate any help.
If I understood your problem, you need to have both images side by side. If so, you need to adjust your CSS and HTML to allow that:
See this working Fiddle Example!
HTML
<div class="imageSub" style="width: 300px;">
<a href="../../../Downloads/Unnamed Site 2/stem studio.html">
<img src="../../../Downloads/Unnamed Site 2/PIC.jpg" alt="Something" width="300" height="437" />
</a>
<div class="blackbg">Hello</div>
<div class="label"> The Wolf</div>
</div>
<div class="imageSub" style="width: 300px;">
<img src="../../../Downloads/Unnamed Site 2/PIC.jpg" alt="Something" width="300" height="437" />
<div class="blackbg">Hello</div>
<div class="label"> The Wolf</div>
</div>
Removed the <br>
CSS
div.imageSub {
position: relative;
float: left;
}
div.imageSub img {
z-index: 1;
}
div.imageSub div {
position: absolute;
left: 15%;
right: 15%;
bottom: 0;
padding: 4px;
}
div.imageSub div.blackbg {
z-index: 2;
color: #000;
background-color: #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: 0.5;
}
div.imageSub div.label {
z-index: 3;
color: white;
}
Added float: left; to the div.imageSub
EDITED
A working Fiddle Example based on the previous fix, adapted for a 3x2 visual presentation.
Remove the <br/>
Add css rules
.imageSub { float: left;}
.clear { clear: both; }
Add <div class="clear"/> to the end.
Don't forget step 3 in floating environments.
jsfiddle
Here's simple a 2 x 3 div solution using floats: http://jsfiddle.net/Fb6Jk/