I'm trying to create a landing page where it shows 2 logos. On hover a background image should appear on the left hand side of the page but should fill from top to bottom. At the moment it's only filling the div container of the logo. I'm not that good at coding and got help with creating these codes.
Code Below
body {
background-color: white;
}
.container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.row {
display: flex;
width: 80%;
}
.left-logo,
.right-logo {
width: 50%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.left-logo img,
.right-logo img {
opacity: 0;
transition: opacity 5s;
}
.left-bg,
.right-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 0.5s;
}
.left-logo:hover .left-bg {
opacity: 1;
background-image: url(images/bg-left.png);
}
.right-logo:hover .right-bg {
opacity: 1;
background-image: url(images/bg-right.png);
}
.left-logo img,
.right-logo img {
opacity: 1;
}
<body>
<div class="container">
<div class="row">
<div class="left-logo">
<img src="images/logo-left.png" alt="Left Logo">
<div class="left-bg"></div>
</div>
<div class="right-logo">
<img src="images/logo-right.png" alt="Right Logo">
<div class="right-bg"></div>
</div>
</div>
</div>
</body>
Tried to put the image in the css code where left-bg is but still didn't work.
Try adding height: 100vh; and width: 100%; to the .row class and margin:0; to the body tag as follows:
body {
background-color: white;
margin: 0;
}
.container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.row {
display: flex;
width: 100%;
height: 100vh;
}
.left-logo, .right-logo {
width: 50%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.left-logo img, .right-logo img {
opacity: 0;
transition: opacity 5s;
}
.left-bg, .right-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 0.5s;
}
.left-logo:hover .left-bg {
opacity: 1;
background-image: url(https://lumiere-a.akamaihd.net/v1/images/sa_pixar_virtualbg_coco_16x9_9ccd7110.jpeg);
}
.right-logo:hover .right-bg {
opacity: 1;
background-image: url(https://lumiere-a.akamaihd.net/v1/images/sa_pixar_virtualbg_coco_16x9_9ccd7110.jpeg);
}
.left-logo img, .right-logo img {
opacity: 1;
}
<head>
<title>Landing Page</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="left-logo">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSOyCtPSy5vZ6NNKe6nmW5aEAWDfv2R3bV72g&usqp=CAU" alt="Left Logo">
<div class="left-bg"></div>
</div>
<div class="right-logo">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSOyCtPSy5vZ6NNKe6nmW5aEAWDfv2R3bV72g&usqp=CAU" alt="Right Logo">
<div class="right-bg"></div>
</div>
</div>
</div>
</body>
Related
I wanna make a simple responsive site with 3 images in-front of a background, each of them a button that gets overlayed when you hover it. The problem is when I add the additional containers in order to do the image hover overlays, justify-content and row-wrap stop working as they should and they no longer center the images properly. If I remove all the container divs everything goes back to normal.
.background {
display: inline-block;
position: relative;
min-width: 100%;
max-width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.mountain {
pointer-events: none;
position: absolute;
width: 100%;
min-height: 100%;
z-index: -1;
}
.tabs {
display: flex;
justify-content: space-between;
align-content: space-between;
flex-flow: row wrap;
gap: 10px;
padding-top: 200px;
}
.container1 {
position: relative;
left: 80px;
}
.container1:hover .portraits {
opacity: 0.5;
}
.portraits {
margin: auto;
max-width: 100%;
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
width: 480px;
max-height: 100%;
}
.container2 {
position: relative;
width: 480px;
max-height: 100%;
}
.container2:hover .secondtab {
opacity: 0.5;
}
.secondtab {
margin: auto;
max-width: 100%;
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
width: 480px;
max-height: 100%;
}
.container3 {
position: relative;
margin-right: 80px;
;
}
.container3:hover .thirdtab {
opacity: 0.5;
}
.thirdtab {
margin: auto;
max-width: 100%;
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
width: 480px;
max-height: 100%;
}
<div class="background">
<img class="mountain" src="https://scontent.fsof8-1.fna.fbcdn.net/v/t1.15752-9/248678344_166048722401558_3753835307514045389_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=ae9488&_nc_ohc=hMjalJL0QVMAX8jUsDI&_nc_ht=scontent.fsof8-1.fna&oh=03_AVLASJWuh-jugLUe4XS8djFYOc8Ps3PK3bA8Ue4D9zHEMg&oe=62801864">
<div class="buttons">
<button class="Contacts">CONTACTS</button>
<button class="Aboutme">ABOUT ME</button>
<section class="tabs">
<div class="container1">
<input class="portraits" type="image" src="https://scontent.fsof8-1.fna.fbcdn.net/v/t1.15752-9/248678344_166048722401558_3753835307514045389_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=ae9488&_nc_ohc=hMjalJL0QVMAX8jUsDI&_nc_ht=scontent.fsof8-1.fna&oh=03_AVLASJWuh-jugLUe4XS8djFYOc8Ps3PK3bA8Ue4D9zHEMg&oe=62801864"
/>
</div>
<div class="container2">
<input class="secondtab" type="image" src="https://scontent.fsof8-1.fna.fbcdn.net/v/t1.15752-9/248678344_166048722401558_3753835307514045389_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=ae9488&_nc_ohc=hMjalJL0QVMAX8jUsDI&_nc_ht=scontent.fsof8-1.fna&oh=03_AVLASJWuh-jugLUe4XS8djFYOc8Ps3PK3bA8Ue4D9zHEMg&oe=62801864"
/>
</div>
<div class="container3">
<input class="thirdtab" type="image" src="https://scontent.fsof8-1.fna.fbcdn.net/v/t1.15752-9/248678344_166048722401558_3753835307514045389_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=ae9488&_nc_ohc=hMjalJL0QVMAX8jUsDI&_nc_ht=scontent.fsof8-1.fna&oh=03_AVLASJWuh-jugLUe4XS8djFYOc8Ps3PK3bA8Ue4D9zHEMg&oe=62801864"
/>
</div>
</section>
Change space-between to space-around on your .tabs class. Then, remove any values you have set on your flex items. For example, I removed the left: 80px value you had set on container1 and removed the margin-right from container3.
Setting those values are being counterproductive to the flexbox as you are instructing the browser to position those containers in a relatively static position within the parent. This will be much more responsive if you allow flex do its job.
.background {
display: inline-block;
position: relative;
min-width: 100%;
max-width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.mountain {
pointer-events: none;
position: absolute;
width: 100%;
min-height: 100%;
z-index: -1;
}
.tabs {
display: flex;
justify-content: space-around;
align-content: space-between;
flex-flow: row wrap;
padding-top: 200px;
}
.container1 {
display: flex;
position: relative;
}
.container1:hover .portraits {
opacity: 0.5;
}
.portraits {
display: flex;
margin: auto;
max-width: 100%;
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
width: 480px;
max-height: 100%;
}
.container2 {
display: flex;
position: relative;
width: 480px;
max-height: 100%;
}
.container2:hover .secondtab {
opacity: 0.5;
}
.secondtab {
display: flex;
margin: auto;
max-width: 100%;
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
width: 480px;
max-height: 100%;
}
.container3 {
display: flex;
position: relative;
}
.container3:hover .thirdtab {
opacity: 0.5;
}
.thirdtab {
display: flex;
margin: auto;
max-width: 100%;
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
width: 480px;
max-height: 100%;
}
<div class="background">
<img class="mountain" src="https://scontent.fsof8-1.fna.fbcdn.net/v/t1.15752-9/248678344_166048722401558_3753835307514045389_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=ae9488&_nc_ohc=hMjalJL0QVMAX8jUsDI&_nc_ht=scontent.fsof8-1.fna&oh=03_AVLASJWuh-jugLUe4XS8djFYOc8Ps3PK3bA8Ue4D9zHEMg&oe=62801864">
<div class="buttons">
<button class="Contacts">CONTACTS</button>
<button class="Aboutme">ABOUT ME</button>
</div>
<section class="tabs">
<div class="container1">
<input class="portraits" type="image" src="https://scontent.fsof8-1.fna.fbcdn.net/v/t1.15752-9/248678344_166048722401558_3753835307514045389_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=ae9488&_nc_ohc=hMjalJL0QVMAX8jUsDI&_nc_ht=scontent.fsof8-1.fna&oh=03_AVLASJWuh-jugLUe4XS8djFYOc8Ps3PK3bA8Ue4D9zHEMg&oe=62801864"
/>
</div>
<div class="container2">
<input class="secondtab" type="image" src="https://scontent.fsof8-1.fna.fbcdn.net/v/t1.15752-9/248678344_166048722401558_3753835307514045389_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=ae9488&_nc_ohc=hMjalJL0QVMAX8jUsDI&_nc_ht=scontent.fsof8-1.fna&oh=03_AVLASJWuh-jugLUe4XS8djFYOc8Ps3PK3bA8Ue4D9zHEMg&oe=62801864"
/>
</div>
<div class="container3">
<input class="thirdtab" type="image" src="https://scontent.fsof8-1.fna.fbcdn.net/v/t1.15752-9/248678344_166048722401558_3753835307514045389_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=ae9488&_nc_ohc=hMjalJL0QVMAX8jUsDI&_nc_ht=scontent.fsof8-1.fna&oh=03_AVLASJWuh-jugLUe4XS8djFYOc8Ps3PK3bA8Ue4D9zHEMg&oe=62801864"
/>
</div>
</section>
</div>
Edit ~ If you don't want the images to wrap, remove all the static (fixed) widths and use this:
.container1,
.container2,
.container3 {
width: calc(100%/3);
}
I'm noticing some lag from some of my images, and I was curious on what the most efficient way of loading a zoomable background image would be: Img tag vs a pseudo element with a background image.
My goal is to not have lag on a high quality image.
Which of these would be best from a performance perspective for zoomable background image?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.card-list {
display: flex;
justify-content: center;
gap: 20px;
padding: 20px;
}
.card {
height: 300px;
width: 250px;
position: relative;
box-shadow: 0 0 5px grey;
overflow: hidden;
border-radius: 20px;
background-color: #0004;
}
.card-text {
display: flex;
align-items: flex-end;
color: white;
font-size: 24px;
font-family: Arial;
padding: 20px;
height: 100%;
width: 100%;
}
.background-image {
position: absolute;
object-fit: cover;
object-position: center;
height: 100%;
width: 100%;
transition: transform .4s ease;
z-index: -1;
}
.card:hover .background-image,
.psuedo-bg-img:hover::before {
transform: scale(1.1);
}
.psuedo-bg-img {
position: relative;
}
.psuedo-bg-img::before {
content: '';
background-image: url('https://source.unsplash.com/random');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
height: 100%;
width: 100%;
z-index: -1;
transition: transform .4s ease;
}
<div class="card-list">
<div class="card">
<img class="background-image" src="https://source.unsplash.com/random">
<div class="card-text">
<h3><img> as Background</h3>
</div>
</div>
<div class="card psuedo-bg-img">
<div class="card-text">
<h3>Pseudo Elem w/ Background Image</h3>
</div>
</div>
</div>
This question already has answers here:
Why can't an element with a z-index value cover its child?
(5 answers)
Closed 2 years ago.
I'm trying to make nav to go behind the header so when the button is clicked red
rectangle does not cover the blue one but comes from behind. What is the reason it doensn't follow the required logic?
const menuBtn = document.getElementById("menuBtn");
const navMenu = document.getElementById("navMenu");
menuBtn.addEventListener("click", () => {
navMenu.classList.toggle("active");
});
*{
margin: 0;
padding:0;
box-sizing: border-box;
}
.header {
height: 100px;
width: 100%;
background-color: blue;
position: fixed;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}
.header__nav {
background: red;
height: 50px;
width: 100%;
position: absolute;
left: 0;
top: 0;
transform: translateY(-50px);
transition: all 1s linear;
z-index: 1;
}
.active {
transform: translateY(100px);
}
<header class="header">
<nav id="navMenu" class="header__nav"></nav>
<button id="menuBtn">Toggle menu</button>
</header>
html
<header class="header">
<div class="blue">
<button id="menuBtn">Toggle menu</button>
</div>
<nav id="navMenu" class="header__nav"></nav>
</header>
-css
*{
margin: 0;
padding:0;
box-sizing: border-box;
}
.blue {
height: 100px;
width: 100%;
background-color: blue;
position: fixed;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}
.header__nav {
background: red;
height: 50px;
width: 100%;
position: absolute;
left: 0;
top: 0;
transform: translateY(-50px);
transition: all 1s linear;
z-index: 0;
}
.active {
transform: translateY(100px);
}
I have created a flex container with 3 flex items.
First flex item contains 2 classes (.flex-item and .overlay).
I want to overlay image over the flex item. I tried it by adding z-index and position but it's not working.
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.flex-item {
margin-right: 50px;
margin-bottom: 50px;
flex: 0 0 15em;
border: 2px solid red;
height: 100px;
}
.overlay {
background: url(https://image.freepik.com/free-icon/check-circle_318-31777.jpg) no-repeat center;
background-size: 100px 80px;
z-index: 110;
position: relative;
opacity: 0.6; /* Real browsers */
filter: alpha(opacity=60); /* MSIE */
height: 170px;
}
<div class="flex-container">
<div class="flex-item overlay">
Image
<img src="http://7bna.net/images/home-images/home-images-0.jpg" />
</div>
<div class="flex-item">
</div>
<div class="flex-item">
</div>
</div>
Please see the code in codepen
Your check is background and house is content so background can't be above content. Move check to another element.
.flex-container{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.flex-item{
margin-right: 50px;
margin-bottom: 50px;
flex: 0 0 15em;
border:2px solid red;
height:100px;
}
.overlay:before {
background: url(https://image.freepik.com/free-icon/check-circle_318-31777.jpg) no-repeat center;
background-size: 100px 80px;
z-index: 110;
position: absolute;
opacity: 0.6; /* Real browsers */
filter: alpha(opacity=60); /* MSIE */
height: 170px;
width: 170px;
display: block;
content: '';
}
<div class="flex-container">
<div class="flex-item overlay">
Image
<img src="http://7bna.net/images/home-images/home-images-0.jpg" />
</div>
<div class="flex-item">
</div>
<div class="flex-item">
</div>
</div>
In your CSS, the .overlay class establishes a background image on the parent element.
In your HTML, the img element places an image as a child of the .overlay parent.
Per the rules of z-index stacking contexts, a child cannot appear behind the parent. Therefore, the background image (parent) cannot appear in front of the img (child).
That's why your img is always out front, irrespective of z-index.
But there is an easy solution to this problem. Use an absolutely-positioned pseudo-element:
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.flex-item {
margin-right: 50px;
margin-bottom: 50px;
flex: 0 0 15em;
border: 2px solid red;
min-height: 100px;
display: flex;
flex-direction: column;
position: relative;
}
img {
width: 100%;
min-height: 0; /* https://stackoverflow.com/q/36247140/3597276 */
}
.overlay::after {
background: url(https://image.freepik.com/free-icon/check-circle_318-31777.jpg) no-repeat center;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
background-size: contain;
opacity: 0.6;
content: "";
}
<div class="flex-container">
<div class="flex-item overlay">
<img src="http://7bna.net/images/home-images/home-images-0.jpg" />
</div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
revised codepen
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align:center;
}
<div class="container">
<img src="http://7bna.net/images/home-images/home-images-0.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><img src="https://image.freepik.com/free-icon/check-circle_318-31777.jpg" width="50%" />
</div>
</div>
</div>
use position: absolute not relative in .overlay
Building my portfolio site and trying to show project name on hover over the image. I found some css people use to achieve this but does not work on my site for some reason. What could I be doing wrong?
.portfolioImage-half {
display: inline-block;
margin: 25px 5px;
width: 30%;
background-color: #111;
overflow: hidden
}
.portfolio-half {
width: 100%;
}
.portfolioImg {
transition: all .3s ease-in-out;
}
.portfolioImg:hover {
opacity: .2;
transform: scale(1.1);
cursor: pointer;
}
span.text-content {
background: rgba(0, 0, 0, 0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
}
span.text-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
span.text-content {
background: rgba(0, 0, 0, 0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
opacity: 0;
}
.portfolioImage-half:hover span.text-content {
opacity: 1;
}
<div class="row">
<div id="workBlock" class="portfolio-block fixed-bg dark-bg">
<div class="row portfolioRow">
<div class="portfolioImage-half">
<img src="assets/portfolio/doug-fir-logo-for-instagran.jpg" alt="Doug Fir Digital Logo" class="portfolioImg portfolio-half doug" data-target="#logoDesign">
<span class="text-content"><span>Place Name</span></span>
</div>
<div class="portfolioImage-half">
<img src="assets/portfolio/AmbeCreations-logo.jpg" alt="Ambe creations logo" class="portfolioImg portfolio-half ambe" data-target="#logoDesign">
</div>
</div>
</div>
</div>
Try using CSS Flexbox. Make your
.text-content a flex container using display: flex;
Give .portfolioImage-half position relative
Give width & height in %ages
Like:
.portfolioImage-half {
position: relative;
}
span.text-content span {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
Have a look at the working snippet below:
.portfolioImage-half {
position: relative;
display: inline-block;
margin: 25px 5px;
width: 30%;
background-color: #111;
overflow: hidden
}
.portfolio-half {
width: 100%;
}
.portfolioImg {
transition: all .3s ease-in-out;
}
.portfolioImg:hover {
opacity: .2;
transform: scale(1.1);
cursor: pointer;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
span.text-content span {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
}
.portfolioImage-half:hover span.text-content {
opacity: 1;
}
<div class="row">
<div id="workBlock" class="portfolio-block fixed-bg dark-bg">
<div class="row portfolioRow">
<div class="portfolioImage-half">
<img src="http://placehold.it/100x100" alt="Doug Fir Digital Logo" class="portfolioImg portfolio-half doug" data-target="#logoDesign">
<span class="text-content"><span>Place Name</span></span>
</div>
<div class="portfolioImage-half">
<img src="http://placehold.it/100x100" alt="Ambe creations logo" class="portfolioImg portfolio-half ambe" data-target="#logoDesign">
</div>
</div>
</div>
</div>
Hope this helps!
No you cannot style the img alt attribute.
Try:
adding a "z-index: 1; position: absolute;" to the .portfolioImage-half:hover span.text-content class.
Then add a "z-index:0; position: relative;" to the .portfolioImage-half class
You will most probably need to position the "span.text-content" element by using "Left"/"Right" properties