I'm not sure how to add a grid below the current background picture and continue adding info. When I try adding a grid now, it just creates one below the navbar and not below the current background.
/**********BODY GENERAL**********/
body {
margin: 0;
}
/* Fix this one day */
.bg-img {
background: url('https://images.unsplash.com/photo-1508781015212-46d58946bb05?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=39b69f4b9e54ea449f90e3d714bf9215&auto=format&fit=crop&w=1951&q=80') no-repeat center center;
background-size: cover;
height: 100vh;
}
strong {
font-weight: bold;
}
/*********NAVIGATION*********/
nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 1em;
grid-auto-rows: auto;
text-align: center;
align-items: center;
background: /*rgba(255, 51, 0, .95);
*/
z-index: 10;
}
#media screen and (max-width: 900px) {
nav {
grid-template-columns: 100%;
grid-template-rows: auto;
grid-gap: 1em;
}
}
.menu1 {
grid-column: 1;
}
.menu2 {
grid-column: 2;
}
.logo {
grid-column: 3;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
font-size: 28px;
width: 500px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
height: 7vh;
margin-bottom: 25px;
color: #000;
text-transform: uppercase;
letter-spacing: 3px;
}
.menu3 {
grid-column: 4;
}
.menu4 {
grid-column: 5;
}
/**************HOVER ANIMATION**************/
div>a {
font-family: 'Raleway';
text-transform: uppercase;
text-decoration: none;
color: #000;
position: relative;
font-size: 0.8rem;
}
div>a:hover {
color: #000;
}
div>a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: -4px;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
div>a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/**********MAIN HEADER***********/
header {
color: white;
justify-content: center;
align-content: center;
top: 0;
bottom: 0;
left: 0;
}
/**********BODY*****************/
.Minfo {
color: red;
width: 100%;
padding-top: 100px;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
}
.subtitle {
padding-left: 4em;
padding-top: 29em;
font-size: 100%;
color: #fff;
}
.title {
font-size: 3em;
text-align: left;
color: #FFF;
padding-bottom: 0px;
}
.subtext {
padding-top: 0px;
color: #FFF;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Centennial It's Academic</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="main.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
</head>
<body>
<div class="bg-img">
<header>
<nav class="container">
<div class="menu1">
<a class="navLinks" href="#home">Home</a>
</div>
<div class="menu2">
<a class="navLinks" href="#upcoming">Tournaments</a>
</div>
<div class="logo">
<p>It's Academic</p>
</div>
<div class="menu3">
<a class="navLinks" href="#history">History</a>
</div>
<div class="menu4">
<a class="navLinks" href="#faq">Contact Info</a>
</div>
</nav>
<!-- This cluster of info -->
<div class="Minfo">
<div class="subtitle">CENTENNIAL
<br>
<div class="title"> It's Academic</div>
<br>
<div class="subtext">Meets every Tuesday in Room 506</div>
</div>
</div>
</header>
<!--Don't even -->
</div>
</body>
</html>
codepen (Please open in full page mode):
An example of how I would want it to look is like on this website, where all the info is under that background.
I'm not sure what you mean. There are 2 options in my mind:
Push the grid below the image. In this case, just move the header tag from .bg-img and put it after. https://codepen.io/moshfeu/pen/ERWVdZ
You want the fixed effect (just like the website you attached). In this case, you need to use position: fixed on the header.
https://codepen.io/moshfeu/pen/aKJvXW
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport
https://developer.mozilla.org/en-US/docs/Web/CSS/position
Related
So I am creating a website for myself and am having a bit of an issue trying to hyperlink. I am aware that I need to wrap the entire text in an anchor element , however, despite doing this and having my contact page ready, I am unable to click on the hyperlink. Attached below is the main HTML code that I have been using and the CSS code as well in order to illustrate what I am doing.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Fire Sans', sans-serif;
text-decoration: none;
list-style: none;
color: #FFF;
}
.app{
display: flex;
min-height: 100vh;
}
.sidebar{
flex: 1 1 0;
max-width: 300px;
padding: 2rem 1rem;
background-color: #051427;
}
.sidebar h3{
color: #707793;
font-size: 0.75rem;
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.sidebar .menu{
margin: 0 -1rem;
}
.sidebar .menu .menu-item{
display: block;
padding: 1rem;
color: #FFF;
text-decoration: none;
transition: 0.2s linear;
}
.sidebar .menu .menu-item:hover,
.sidebar .menu .menu-item.is-active{
color #6f6d72;
border-right: 5px solid #6f6d72;
}
.content{
flex: 1 1 0;
padding: 2rem;
}
.content h1{
color: #D8BFD8;
font-size: 2.5rem;
font-family: papyrus;
margin-bottom: 1rem;
}
.content p{
color: #C8C8C8;
font-family: papyrus;
}
.menu-toggle{
display: none;
position: fixed;
top: 2rem;
right: 2rem;
width: 60px;
height: 60px;
border-radius: 99px;
background-color: #051427;
cursor: pointer;
}
.hamburger{
position: relative;
top: calc(50% - 2px);
left: 50%;
transform: translate(-50%, -50%);
width: 32px;
}
.hamburger > span,
.hamburger > span::before,
.hamburger > span::after{
display: block;
position: absolute;
width: 100%;
height: 4px;
border-radius: 99px;
background-color: #FFF;
transition-duration: .25s;
}
.hamburger > span::before{
content: '';
top:-8px;
}
.hamburger > span:after{
content: '';
top: 8px;
}
.menu-toggle.is-active .hamburger > span{
transform: rotate(45deg);
}
.menu-toggle.is-active .hamburger > span::before{
top: 0;
transform: rotate(0deg);
}
.menu-toggle.is-active .hamburger > span::after{
top: 0;
transform: rotate(90deg);
}
#media (max-width: 1024px){
.sidebar{
max-width: 200px;
}
}
#media (max-width: 768px){
.menu-toggle{
display: block;
}
.content{
padding-top: 8rem;
}
.sidebar{
position: fixed;
top: 0;
left: -300px;
height: 100vh;
width: 100%;
max-width: 300px;
transition: 0.2s linear
}
.sidebar.is-active{
left: 0;
}
}
body{
font-family: papyrus;
background-image: url(AstroImg.jpg);
background-size: cover;
background-position: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content= "IE-edge">
<meta name= "viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
<script src="https://kit.fontawesome.com/4767153995.js" crossorigin="anonymous"></script>
<title> MAP | Astrophotography </title>
</head>
<body>
<div class="app">
<div class= "menu-toggle">
<div class= "hamburger">
<span></span>
</div>
</div>
<aside class="sidebar">
<h3>Menu</h3>
<nav class= "menu">
<i class="fa-solid fa-house"></i> Home
<i class="fa-solid fa-user"></i> About Me <i class="fa solid fa-gears"></i> My Equipment
<i class="fa-solid fa-star"></i> Image Gallery
<a href="#" class="menu-item"><i class="fa-regular fa-address-book"></i>Contact</a>
</nav>
</aside>
<main class="content">
<h1> Mapping Astronomical Points </h1>
<p>Your guide to the sky</p>
</main>
</div>
<script>
const menu_toggle = document.querySelector('.menu-toggle');
const sidebar = document.querySelector('.sidebar');
menu_toggle.addEventListener('click', () => {
menu_toggle.classList.toggle('is-active');
sidebar.classList.toggle('is-active');
})
</script>
</body>
</html>
Below is the example I am struggling to fix. If I remove the class tag, the hyperlink works fine, but then it begins to distort the layout of the website, and if I keep the class tag, then hyperlink does not work at all. What can I do to fix this issue? Any help is appreciated.
<a href="#" class="menu-item"><i class="fa-regular fa-address-book"></i>Contact</a>
Remove the nested anchor and add the class to the outer anchor.
<i class="fa-regular fa-address-book"></i>Contact
Change this line:
<a href="#" class="menu-item"><i class="fa-regular fa-address-book"></i>Contact</a>
With this:
<i class="fa-regular fa-address-book"></i>Contact
EXPLANATION: You should not have an anchor tag inside an anchor tag.
I'm pretty much stuck on a site that I'm trying to build in the responsiveness part
And in the position of the text.
The img background -
What I try to do it to make the img background full cover in big screens
and on the small screen, I want that they will see the ball in the img - it only works for me for big screens.
Next to this, I want to put H1 and p, but I want it will be near the ball in the background img
My code:
/* hamburger */
const hamburger = document.querySelector("#hamburger");
const navUL = document.querySelector("#nav-ul");
hamburger.addEventListener('click', () =>{
navUL.classList.toggle('show');
});
html,body{
padding: 0;
margin: 0;
font-family: 'Rubik', sans-serif;
}
*{
box-sizing: border-box;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: #fff;
}
.container{
max-width: 1100px;
margin: 0 auto;
}
.btn{
background-color: #222f3e;
color: white;
padding: 6px 10px;
border-radius: 20px;
cursor: pointer;
}
.btn:hover{
color: #2e86de;
background-color: #fff;
}
/* Header */
header {
background-image: url(./img/main-img.jpg) ;
background-repeat: no-repeat;
background-position: bottom center ;
background-size: cover;
}
/* Navbar */
#navbar{
padding: 10px;
}
#navbar .container{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.hamburger{
display: none;
background: transparent;
border: 0;
color: #fff;
font-size: 20px;
cursor: pointer;
}
.hamburger:focus{
outline: none;
}
#navbar ul{
padding-right: 0;
}
#navbar ul li {
display: inline-block;
font-size: 18px;
}
.logo a{
padding: 20px;
color: #fff;
}
/* Showcase Section */
#showcase{
min-height: 700px;
}
#showcase .container{
}
#media screen and (max-width: 767px){
#nav-ul{
display: none;
width: 100%;
}
#nav-ul.show{
display: flex;
justify-content: center;
}
.hamburger{
display: block;
}
}
<!DOCTYPE html>
<html dir="rtl" lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght#0,400;0,500;0,600;1,400;1,500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./mystyle.css">
<title>Football</title>
</head>
<body>
<header>
<nav id="navbar">
<div dir="ltr" class="container">
<h1 class="logo">
Natan Football
</h1>
<button class="hamburger" id="hamburger">
<i class="fas fa-bars"></i>
</button>
<ul id="nav-ul">
<li><a class="btn"href="#">צור קשר</a></li>
<li><a class="btn"href="#">מה מציעים</a></li>
<li><a class="btn"href="#">קצת עלינו</a></li>
<li><a class="btn" href="./index.html">דף הבית</a> </li>
</ul>
</div>
</nav>
<section id="showcase">
<div class="container grid">
<h1>some text asgfasfgfdfgdg</h1>
<p>dsgsdgdfgdfgdg</p>
</div>
</section>
</header>
<script src="./app.js"></script>
</body>
</html>
here i have provided a very basic code cause i don't have your full code.
I just added few css properties for you needs. If you run this code on big screen the .text will be top and center of the page. and you go in small screen text will be near the ball as you asked. You can even use px for height. It's just an example to show you.
body {
background: url("https://i.stack.imgur.com/08nIZ.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
position: relative;
}
.text {
position: absolute;
color: white;
text-align: center;
left: 50%;
transform: translateX(-50%);
}
#media screen and (max-width: 767px) {
body {
height: 40vh;
}
.text {
top: 50%;
}
}
<div class="wrapper">
<div class="text">
<h1>some text asgfasfgfdfgdg</h1>
<p>dsgsdgdfgdfgdg</p>
</div>
</div>
Let me know if it doesn't work for you.
My problem is that whenever I scroll down, a <section> completely covers the navbar. The Navbar is fixed, and is set to be at the top.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link
href="https://fonts.googleapis.com/css2?family=Gotu&display=swap"
rel="stylesheet"
/>
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./style.css" />
<title>Pelicans</title>
</head>
<body>
<div class="navbar">
<a href="#home"
><img
class="logo"
height="100"
src="https://scontent-lax3-1.xx.fbcdn.net/v/t31.0-1/p200x200/15068898_1226936174051780_7166698313496052354_o.jpg?_nc_cat=101&_nc_sid=dbb9e7&_nc_ohc=ocyXiBkw3rcAX8xha1J&_nc_ht=scontent-lax3-1.xx&_nc_tp=6&oh=a21d0f67f860f6befb0cdc68e01c3c2a&oe=5EB3D4BA"
width="100"
alt=""
/></a>
<a class="link" href="#home">Home</a>
<a class="link" href="#about">About</a>
<a class="link" href="#gallery">Gallery</a>
<a class="link-contact" href="#contact">Contact</a>
</div>
<section id="home"></section>
<section id="about"></section>
<section id="gallery"></section> <!-- Not in use yet -->
<section id="contact"></section> <!-- Not in use yet -->
</body>
</html>
CSS:
body {
background-color: #5cdb95;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
padding: 1em;
padding-top: 0em;
padding-bottom: 0em;
grid-gap: 0em;
background: #edf5e1;
grid-auto-rows: minmax(100px, auto);
border-bottom-style: solid;
border-bottom-color: #05386b;
font-family: "Gotu", sans-serif;
font-size: 25px;
}
.navbar > .link {
text-align: center;
text-decoration: none;
height: 100px;
padding: 32px;
transition: background-color 0.7s;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
font-family: inherit;
}
.navbar > .link:hover {
background-color: #8ee4af;
font-family: inherit;
}
.logo {
border-radius: 50%;
}
.link-contact {
padding-top: 0.6em;
text-align: center;
height: 65px;
width: 180px;
background-color: #379683;
text-decoration: none !important;
border-radius: 20px;
color: #edf5e1;
transition: background-color 0.7s;
font-family: inherit;
}
.link-contact:hover {
text-decoration: none !important;
color: #edf5e1;
background-color: #287566;
font-family: inherit;
}
#home {
background-color: blue;
height: 680px;
}
#about {
background-color: inherit;
height: 680px;
position: relative;
}
Note: The first section doesn't overlap the navbar, just the second section.
Stack Overflow is telling me that too much of this question is code so here is some text...
It is occuring for z-index issue.
Give it like this:
#about {
background-color: inherit;
height: 680px;
position: relative;
z-index: -99;
}
As I tried to add a video on my top-wrapper previously.
(Thank you so much for those who leave me some comments.)
However, I still cannot solve the problem.
Well, I could upload a video, but still cannot style properly.
After I uploaded a video like in top-wrapper, then very struggling to style....
please teach me how to code css so that i can place a video in my top-wrapper,,,
body {
margin: 0;
font-family: "Hiragino Kaku Gothic ProN";
}
a {
text-decoration: none;
}
.container {
max-width: 1170px;
width: 110%;
padding: 0 15px;
margin: 0 auto;
}
.top-wrapper {
padding: 100px 0 50px 0;
text-align: center;
background:rgba(255,0,0,0.1);
}
.top-wrapper h1 {
font-size: 75px;
letter-spacing: 5px;
padding-top: 5px;
color: white;
text-align: center;
}
.top-wrapper p {
font-size: 25px;
color: white;
text-align: center;
}
header {
height: 65px;
width: 100%;
background-color: rgba(34, 49, 52, 0.9);
top: 0;
position: fixed;
z-index: 10;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TakashiKaida</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
</head>
<body>
<header>
<div class="container">
<div class="header-left">
</div>
<div class="header-right">
Home
About
Blog
CV
</div>
</div>
</header>
<div class="top-wrapper">
<div class="video" src="video3344.mov" autoplay loop muted type="video/mp4"></video>
<div class="container">
<h1>HELLO, IT'S ME.</h1>
<h1>I AM TAKASHI</h1>
<p><br><br>Marketing Analyst/Assistant</p>
<p>Co-Founder and CEO of <strong>FLOW</strong></p>
</div>
</div>
</div>
See the description of Mozilla with an example: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
In your code add the absolute positioning for container to overlay the content. Second thing add the transparent background color :before for top-wrapper class. And also I adjusted the padding based on header height.
body {
margin: 0;
font-family: "Hiragino Kaku Gothic ProN";
}
* {
box-sizing: border-box;
}
a {
text-decoration: none;
}
.mt-50 {
margin-top: 50px;
}
.container {
max-width: 1170px;
width: 110%;
padding: 0 15px;
margin: 0 auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
z-index: 1;
}
.top-wrapper:before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 1;
background: rgba(255, 0, 0, 0.1);
}
.top-wrapper {
padding: 65px 0 0px 0;
text-align: center;
position: relative;
}
.top-wrapper h1 {
font-size: 75px;
letter-spacing: 5px;
padding-top: 5px;
color: white;
text-align: center;
}
.top-wrapper p {
font-size: 25px;
color: white;
text-align: center;
}
header {
height: 65px;
width: 100%;
background-color: rgba(34, 49, 52, 0.9);
top: 0;
position: fixed;
z-index: 10;
}
<header>
<div class="container">
<div class="header-left">
</div>
<div class="header-right">
Home
About
Blog
CV
</div>
</div>
</header>
<div class="top-wrapper">
<video autoplay loop width="100%">
<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4" /> Your browser does not support the video tag. We suggest you upgrade your browser.
</video>
<div class="container">
<h1>HELLO, IT'S ME.</h1>
<h1>I AM TAKASHI</h1>
<p class="mt-50">Marketing Analyst/Assistant</p>
<p>Co-Founder and CEO of
<strong>FLOW</strong>
</p>
</div>
</div>
I am trying to place quote1.jpg next to yoda.png, but no matter where I place the div class it ends up somewhere else. First it was on top of the header now it is covering up Yoda. When you hover your mouse over Yoda it is supposed to show his quote but instead it shows the quote.jpg. All I am trying to do is place the quote.jpg next to Yoda.
.header {
background: black;
color: white;
font-family: cursive, Haettenschweiler, 'Arial Narrow Bold',
sans-serif ;
margin: 20px;
padding: 20px;
text-align: center;
}
p {
background-color: blanchedalmond;
font-size: 26px;
color: black;
opacity: 1;
}
.container {
position: relative;
width: 50%;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 2;
}
.text {
background-color: rgb(13, 53, 228);
color: white;
font-size: 25px;
padding: 16px 32px;
}
/* No matter what I do I cannot
place the quote1.jpg in the correct place */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Here We Go!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class = "header">
<h1>I Am Tying Hard To Learn Html</h1>
<p>"Do Or Do Not There Is No Try"</p>
</div>
<div class= "container">
<img src="yoda.png" alt="Yoda"
class= "image" style = "width:50%">
<div class="text">That right, you got.
Herh herh herh.
<div class ="middle">
<img src="quote1.jpg" alt="quote">
</div>
</body>
</html>
It is easier to use javascript or jquery to implement what you intend.
Here is a sample code:
.header {
background: black;
color: white;
font-family: cursive, Haettenschweiler, 'Arial Narrow Bold',
sans-serif ;
margin: 20px;
padding: 20px;
text-align: center;
}
p {
background-color: blanchedalmond;
font-size: 26px;
color: black;
opacity: 1;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.text {
display:block;
opacity: 0;
background-color: rgb(13, 53, 228);
color: white;
font-size: 25px;
padding: 16px 32px;
}
.flex-container {
display: flex;
flex-flow:row wrap;
}
.block{
display: block;
background: red;
margin: 10px;
padding: 10px;
width:100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Here We Go!</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
function show() {
var element = document.getElementsByClassName("text")[0];
element.classList.toggle("open");
}
function hide() {
var element = document.getElementsByClassName("text")[0];
element.classList.toggle("open");
}
</script>
</head>
<body>
<div class="header">
<h1>I Am Tying Hard To Learn Html</h1>
<p>"Do Or Do Not There Is No Try"</p>
</div>
<div class="parent">
<div class="flex-container">
<div class="block yoda-div" id="yoda">
<img src="yoda.png" alt="Yoda" class="image" onmouseover="show()">
<div class="text" onmouseout="hide()">That right, you got.
Herh herh herh.
</div>
</div>
<div class="block" id="quote">
<img src="quote1.jpg" alt="quote">
</div>
</div>
</div>
</body>
</html>
Hello if I understood your question, this might be of help.
.container {
display: flex;
flex-direction: row
flex-wrap: wrap;
}
.custom-img {
height: 45vh;
width: 100%;
object-fit: cover
}
.sections {
position: relative;
margin: 2px;
border: 1px solid green
}
.section-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
background-color: #000;
padding: 2px;
font-size: 18px
}
<div class="container">
<div class="sections">
<div class="section-text">This is the left section</div>
<img class="custom-img" src="https://slicedinvoices.com/wp-content/uploads/edd/2015/12/better-urls.jpg" />
</div>
<div class="sections">
<div class="section-text">This is right section</div>
<img class="custom-img" src="https://yazoogle.com.au/wp-content/uploads/2017/04/urls.jpg" />
</div>
</div>
Hope this helps
Move your quote1 div below the yoda img tag.
2.Modify your following css classes
.middle {
transition: .5s ease;
opacity: 0;
display: inline;
transform: translate(-50%, -50%);
}
.image {
opacity: 1;
display: inline;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}