I have a simple webpage hosted on Heroku. There are 4 images which get resized to 0x0 automatically while it shows up perfectly fine on localhost. I can't figure out what's going wrong.
What it looks like on localhost
What it looks like on heroku
The grey background is because the next section has that background which means the image's size is 0x0.
To verify, I inspected the source code through developer tools.
<div class="section2">
<div class="heading">POWERED BY</div>
<div class="logos">
<a href="https://www.jamboreeindia.com/">
<div class="sponsor-logo">
<img src="jamboree3.png" class="overlay-logo">
<img src="jamboree.png" class="original-logo">
</div>
</a>
<a href="http://www.megalogix.org/">
<div class="sponsor-logo">
<img src="mcs2.png" class="overlay-logo">
<img src="mcs.png" class="original-logo">
</div>
</a>
</div>
</div>
CSS
.section2{
width: 100vw;
padding: 5px 0 0 0;
}
.heading{
text-align: center;
font-weight: 700;
color: #9FACCC;
}
.heading2{
text-align: center;
font-weight: 700;
color: #333;
font-size: 35px;
}
.logos{
width: 100vw;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.sponsor-logo img{
width: 150px;
height: auto;
margin: 50px;
}
.original-logo {
z-index: 1;
opacity: 0;
transition: all .3s ease;
}
.overlay-logo {
position: absolute;
z-index: 3;
transition: all .3s ease;
}
.overlay-logo:hover {
opacity: 0;
transition: all .3s ease;
}
.overlay-logo:hover + .original-logo {
opacity: 1;
transition: all .3s ease;
}
Thanks!
I found out why, disable your Adblocker on that site, it's blocking the images and injecting a style to the "sponsor-logo" class
{
display: none!important;
}
Related
I have a problem here. I need the "sidebar-buttons" to appear after increasing the parent element's size by the hover.
gif w/ my problem
buttons have display none and after I hovering my sidebar-list-item their display change to flex, so I need this change appear after changing sidebar-list-item height and background.
here is my code:
html:
<div class="sidebar-list-item">
<div class="sidebar-main-items">
<div>Стретч-плёнки</div>
<img
src="./assets/icons/sidebar/paper-icon.svg"
width="32"
alt="paper icon"
/>
</div>
<div class="sidebar-buttons">
<button class="sidebar-button-buy" onclick="#">Купить</button>
<button class="sidebar-button-how" onclick="#">Как выбрать?</button>
</div>
</div>
css:
.sidebar-list-item {
font-weight: 500;
font-size: 14px;
min-height: 75px;
height: 100%;
display: flex;
align-items: center;
color: black;
border-bottom: 1px solid #f9f9f9;
transition: all 0.5s ease-in-out;
}
.sidebar-list-item:hover {
display: block;
min-height: 114px;
background-color: #ffca3a;
}
.sidebar-list-item:hover .sidebar-buttons {
display: flex;
}
.sidebar-list-item:hover .sidebar-main-items img {
opacity: 1;
}
What you need is animate the height of it.
First, set the heigth of content as auto.
Second, in buttons container, set max-height:0 and overflow:hidden.
Third, animate the buttons container to max-height:200px.
What happens?
The css will animation will take 400ms to reach 500px even if the container is smaller, so consider testing smaller values so the button animation doesn't finish before the main container animation.
Edit: Updated the snippet, added the transition-delay property on button animation to run 500ms after container animation.
.sidebar-list-item {
font-weight: 500;
font-size: 14px;
height: 50px;
display: block;
align-items: center;
color: black;
border-bottom: 1px solid #f9f9f9;
transition: all 0.5s ease-in-out;
padding:10px 0;
transition-delay: 500ms;
}
.sidebar-list-item:hover {
transition-delay: 00ms;
background-color: #ffca3a;
height:60px;
}
.sidebar-list-item:hover .sidebar-main-items img {
opacity: 1;
}
.sidebar-list-item:hover .sidebar-buttons {
max-height:150px;
transition: all 0.5s ease-in-out;
transition-delay: 500ms;
}
.sidebar-buttons{
transition: all 0.5s ease-in-out;
display: flex;
max-height:0;
overflow:hidden;
}
<div class="sidebar-list-item">
<div class="sidebar-main-items">
<div>Стретч-плёнки</div>
<img
src="./assets/icons/sidebar/paper-icon.svg"
width="32"
height="32"
alt="paper icon"
/>
</div>
<div class="sidebar-buttons">
<button class="sidebar-button-buy" onclick="#">Купить</button>
<button class="sidebar-button-how" onclick="#">Как выбрать?</button>
</div>
</div>
I have a block called case-card which consists of a child div called case-card__wrapper that houses text.
On case-card hover, I want the case-card__wrapper to move up slightly. Not in one action, but as transition.
I feel like I have the general idea, but unsure on how to get the transition to work? At the moment, it just phases from one spot to another:
.case-card {
height: 560px;
width:600px;
color: #ededed;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
transform: translateY(20px);
transition: all .3s ease-in-out;
background-color: #333;
overflow: hidden;
}
.case-card__wrapper{
position: absolute;
transition: 0.5s;
/*top: 0; Don't want to add this because I want the text to be centered in the div and rather not define a number since the div heights may vary */
}
.case-card__title{
font-size: 16px;
}
.case-card:hover .case-card__wrapper {
top: 150px;
}
<div class="case-card">
<div class="case-card__wrapper">
<h4 class="case-card__title">Title</h4>
<p class="case-card__subtitle">Subtitle</p>
</div>
</div>
I'm trying to do this just via CSS. Any ideas?
If you cannot set initial value simply use transfrom. You can also remove position:absolute
.case-card {
height: 560px;
width:600px;
color: #ededed;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
transform: translateY(20px);
transition: all .3s ease-in-out;
background-color: #333;
overflow: hidden;
}
.case-card__wrapper{
transition: 0.5s;
}
.case-card__title{
font-size: 16px;
}
.case-card:hover .case-card__wrapper {
transform:translateY(-100%);
}
<div class="case-card">
<div class="case-card__wrapper">
<h4 class="case-card__title">Title</h4>
<p class="case-card__subtitle">Subtitle</p>
</div>
</div>
Here is a snippet of my Project Code:
body {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
}
input, button {
font-family: 'Montserrat', sans-serif;
}
.img_main_container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn_sign_up, .btn_login:hover {
background: #5d8ffc;
color: #fff;
border: 1px solid #5d8ffc;
border-radius: 5px;
display: block;
width: 300px;
height: 40px;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
}
.btn_login, .btn_sign_up:hover {
background-color: Transparent;
background-repeat:no-repeat;
color: #ffffff;
border-radius: 5px;
display: block;
width: 300px;
height: 40px;
cursor:pointer;
overflow: hidden;
outline:none;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
}
<!DOCTYPE html>
<html>
<body>
<div class="img_main_container">
<img src="https://natgeo.imgix.net/subjects/headers/ND%20header%20(1).jpg?auto=compress,format&w=1920&h=960&fit=crop" alt="Storm" style="width:100%;">
<div class="centered">
<button class="btn_sign_up">Sign up</button>
<button class="btn_login">Login</button>
</div>
</div>
</body>
</html>
Everything works as you can see. But I want that the two buttons are side by side like this in that image here:
I tried so many examples but nothing worked. And I still can't figure out what's wrong here. It would be great if anyone could help. Thanks in advance. :)
Since you are using display:block on your buttons (.btn_sign_up, .btn_login), you can't make two buttons side by side, because block covering whole horizontal section.
Instead of this use display:inline-block and you will have buttons side by side.
More information you can get on the W3Schools
Flexbox would be a good solution for this. Add display: flex to the .centered class. This will place direct children of .centered side by side.
.centered {
display: flex;
}
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Use Flexbox for this issue.This is the better solution. Add display: flex to the .centered class.
.centered { display: flex; align-items: center}
I'm working on an image gallery that uses multiple section tags under the same class as links to each respective album I'm hoping to host. I'm having a problem where I'm unable to define the size of the images to fit inside of the respective sections. I'm hoping to be able to expand the page in the future and as such wouldn't like to add unnecessary lines of code where possible.
This is part of the HTML
<section class="album" style="background: url(https://images.pexels.com/photos/776390/pexels-photo-776390.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb)">
<h2 class="name">Title</h2>
<ul class="details">
<li>Shot With: </li>
<li>Location:</li>
<li>Date:</li>
</ul>
</section>
<section class="album" style="background: url(https://images.pexels.com/photos/1562/italian-landscape-mountains-nature.jpg?w=1260&h=750&auto=compress&cs=tinysrgb)">
<h2 class="name">Title</h2>
<ul class="details">
<li>Shot With: </li>
<li>Location:</li>
<li>Date:</li>
</ul>
</section>
And the CSS
.album {
display: flex;
flex-direction: column;
flex: 1 0 10em;
box-shadow: 0 0 30px #424242;
border-radius: 15px;
overflow: hidden;
padding: .9em;
color: DarkSlateGrey;
transition: flex-basis 350ms ease-in-out;
}
.album:hover {
flex-basis: 25em;
}
.album:hover .details {
opacity: 1;
}
.name {
font-size: 1.3em;
}
.details {
list-style: none;
opacity: 0;
transition: opacity 500ms ease-in-out;
}
.details li {
font-size: 1em;
line-height: 2em;
}
.album {
flex-shrink: 1;
}
I have it set for 8 sections but I made a small pen with two just to make it easier; currently the images in the pen do not fit within the bounds of their respective containers and I was hoping to both center the images and resize them to fit as such. Any help would be greatly appreciated.
If I understand correctly, you want to control the way the background-image is scaled/fitted.
Try this, note the two last lines I added:
.album {
display: flex;
flex-direction: column;
flex: 1 0 10em;
box-shadow: 0 0 30px #424242;
border-radius: 15px;
overflow: hidden;
padding: .9em;
color: DarkSlateGrey;
transition: flex-basis 350ms ease-in-out;
background-size: cover;
background-position: center;
}
There are more options for the background-size property though, you might want to check them out here.
The cover option will resize the image to cover the entire container, but it will also upscale the image if it's too small (so make sure to use images large enough) and it will also cut out some of the edges if the ratio between the image and the container is different. But in most cases it won't matter.
Here is a simple solution for this:
.album {
display: flex;
flex-direction: column;
flex: 1 0 10em;
box-shadow: 0 0 30px #424242;
border-radius: 15px;
overflow: hidden;
padding: .9em;
color: DarkSlateGrey;
transition: flex-basis 350ms ease-in-out;
}
.album:hover {
flex-basis: 25em;
}
.album:hover .details {
opacity: 1;
}
.name {
font-size: 1.3em;
}
.details {
list-style: none;
opacity: 0;
transition: opacity 500ms ease-in-out;
}
.details li {
font-size: 1em;
line-height: 2em;
}
.album {
flex-shrink: 1;
}
<section class="album" style="background: url(https://images.pexels.com/photos/776390/pexels-photo-776390.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);background-repeat: no-repeat;background-size: 100% 100%;background-position: center; ">
<h2 class="name">Title</h2>
<ul class="details">
<li>Shot With: </li>
<li>Location:</li>
<li>Date:</li>
</ul>
</section>
<section class="album" style="background: url(https://images.pexels.com/photos/1562/italian-landscape-mountains-nature.jpg?w=1260&h=750&auto=compress&cs=tinysrgb);background-repeat: no-repeat;background-size: 100% 100%;background-position: center; ">
<h2 class="name">Title</h2>
<ul class="details">
<li>Shot With: </li>
<li>Location:</li>
<li>Date:</li>
</ul>
</section>
So I've took a project from codepen.io and modified it. But now I'm trying to add a background image and I can't display it... Here's my code:
body {
background-image: url("starwars.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
div.window {
color: white;
width: 500px;
padding: .42rem;
border-radius: 5px;
background: #26466D;
margin: 1rem;
text-align: center;
font-family: BlueHighway, Arial Black, sans-serif;
margin: 0 auto;
}
div.window label {
display: block;
background: #660b0b;
font-size: larger;
border-radius: 5px;
padding: .6rem;
transition: .4s all linear;
}
div.window label:hover {
cursor: pointer; background: #311;
}
input.toggle ~ div {
height: 0px; margin: .2rem;
overflow: hidden;
transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620)
}
input.toggle:checked ~ div { height: 230px; }
input.toggle:checked + label { background: red; }
input.toggle { display: none; }
<div style="height: 240px; padding-top: 1.2rem">
<div class="window">
<input type="checkbox" id="punch" class="toggle">
<label for="punch">Use the Force, Luke.</label>
<div>
<img src="http://images.sequart.org/images/Star-Wars-still-use-the-force-luke-e1415132076759.jpg" style="max-width:100%;height:auto" alt="Ackbar">
</div>
</div>
</div>
If someone could find out why my background image is not displaying, that would be great!
Thanks.
I just tested your code and it works fine so I think what's happening is that the path of your background picture is wrong.
If your starwars image is not in the root folder with your html page then it cannot be url("starwars.jpg");. Check if you didn't put it in another folder or so.
Is the image "starwars.jpg" in the same folder as the .html file that is using it?