Related
So I decided to do my portfolio website on my own, which turned out to work pretty ok so far. The only problem is that I can't seem to make it display properly on mobile view. That's even though I've made all the pertinent changes on the css with "#media screen"
Can somebody take a look and tell me why it's doing what it's doing?
To see the problem, go to https://er-sc.com/HTML/image_making.html
on mobile view
In the proper way the image shouldn't cover the "about" button.
Also if you notice anything I could correct to make the website better, let me know.
Looking forward to the community's feedback and suggestions.
Best,
Ellie
Here's my HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>ERSC Image Making</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
<link href="../CSS/styles.css" rel="stylesheet" type="text/css">
</head>
<body id="bigwrapper">
<div class="topleft">
<a class="logoButton" href="https://www.er-sc.com/">E</a>
</div>
<div class="bottomleft">
<a class="logoButton" href="https://www.er-sc.com/">S</a>
</div>
<div class="topright">
<a class="logoButton" href="https://www.er-sc.com/">R</a>
</div>
<div class="bottomright">
<a class="logoButton" href="https://www.er-sc.com/">C</a>
</div>
<div class="bottomcenterLinks">
ABOUT
</div>
<div class="projectWrapper">
<div class="oneProject">
<div class="text">Happy Dancer, 2022</div>
<img src="/images/image-making/22-happy-dancer_k.jpg" alt="figure jumping">
</div>
<div class="oneProject">
<div class="text">Relief, 2022</div>
<img src="/images/image-making/22-0127_1__0020_Ebene-21-Wiederhergestellt_k.jpg" alt="3D extrusion of a scribble with plaster texture">
</div>
<div class="oneProject">
<div class="text">Didi, 2021</div>
<img src="/images/image-making/21-1210didi_k.jpg">
</div>
<div class="oneProject">
<div class="text">Dancing Flowers pt I, 2021</div>
<img src="/images/image-making/21-IG1_k.jpg">
</div>
<div class="oneProject">
<div class="text">Dancing Flowers pt II, 2021</div>
<img src="/images/image-making/21-IG2_k.jpg">
</div>
<div class="oneProject">
<div class="text">Sad Clown, 2021</div>
<img src="/images/image-making/21-200126_3D_1_k.jpg">
</div>
<div class="oneProject">
<div class="text">Alpine Anime (fictitious festival poster for Livia Rita), 2020</div>
<img src="/images/image-making/20-AlpineAnime_k.jpg">
</div>
<div class="oneProject">
<div class="text">Europa Endlos, 2019</div>
<img src="/images/image-making/19-europaendlos-scan_k.jpg">
</div>
<div class="oneProject">
<div class="text">Ascension, 2018</div>
<img src="/images/image-making/18-plakat_klein_ersc_k.jpg">
</div>
<div class="oneProject">
<div class="text">Seoul Impressions 1/4, 2018</div>
<img src="/images/image-making/18-1_k.jpg">
</div>
<div class="oneProject">
<div class="text">Seoul Impressions 2/4, 2018</div>
<img src="/images/image-making/18-7_k.jpg">
</div>
<div class="oneProject">
<div class="text">Seoul Impressions 3/4, 2018</div>
<img src="/images/image-making/18-9_k.jpg">
</div>
<div class="oneProject">
<div class="text">Seoul Impressions 4/4, 2018</div>
<img src="/images/image-making/18-10_k.jpg">
</div>
</div>
</body>
</html>
And here's my CSS
html,
#index {
height: 100%;
width: 100%;
background: radial-gradient(circle, hsla(295, 79%, 24%, 1) 0%, hsla(71, 66%, 78%, 1) 40%, hsla(318, 76%, 81%, 1) 74%, hsla(202, 27%, 45%, 1) 100%););
color: #551A8B;
font-family: sans-serif;
font-size: 1em;
background-attachment: fixed;
display: flex;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
#bigwrapper{
height: 100%;
width: 100%;
background: radial-gradient(circle, hsla(295, 79%, 24%, 1) 0%, hsla(71, 66%, 78%, 1) 40%, hsla(318, 76%, 81%, 1) 74%, hsla(202, 27%, 45%, 1) 100%););
color: #551A8B;
font-family: sans-serif;
font-size: 1em;
background-attachment: fixed;
display: flex;
display: -webkit-flex;
display: flex;
-webkit-align-items: top !important;
align-items: top !important;
-webkit-justify-content: center;
justify-content: center;
}
#font-face {
font-family: 'FT88-Italic';
font-style: normal;
font-weight: 400;
src: url('/fonts/FT88-Italic') format('woff2');
}
p {
font-family: 'FT88-Italic', sans-serif;
}
h1 {
font-family: 'FT88-Italic', sans-serif;
font-size: 2vw;
font-weight: normal;
}
.socials{
font-size: 2vw;
}
a {
text-decoration: none;
color: #551A8B;
font-family: sans-serif;
}
mark {
background-color: rgba(85, 26, 139, 1);
color: white;
border-radius: 0.3em;
}
#wrapper {
height: 80%;
width: 80%;
padding: 0em;
}
.extraBG {
z-index: 1000;
height: 100vh;
width: 50vw;
position: fixed;
background-color: red;
right: 0%;
top:0%
background-repeat: repeat;
background-position: top right;
background-attachment: fixed;
}
.topleft{
position: fixed;
top: 3%;
left: 3%;
z-index: 100;
}
.bottomleft{
position: fixed;
bottom: 3%;
left: 3%;
z-index: 100;
}
.topright{
position: fixed;
top: 3%;
right: 3%;
z-index: 100;
}
.bottomright{
position: fixed;
bottom: 3%;
right: 3%;
z-index: 100;
}
.bottomcenterLinks{
position: fixed;
bottom: 5%;
text-align: center;
text-decoration: none;
vertical-align: middle;
display: table-cell;
font-family: "FT88-Italic", sans-serif;
font-size: 3vh;
color: floralwhite;
}
.bottomcenterLinks a {
color: floralwhite;
text-shadow: 0px 0px 0.25em #551A8B;
}
.bottomcenterLinks a:hover {
color: floralwhite;
text-shadow: 0px 0px 0.15em floralwhite;
transition: 0.6s ease;
}
.bottomcenterLinks a:active {
color: floralwhite;
text-shadow: 0px 0px 0.15em floralwhite;
transition: 0.6s ease;
}
.bottomSmall{
text-align: center;
font-size: 0.8em;
align-self: flex-end;
}
.logoButton {
background-color: floralwhite;
font-family: sans-serif;
width: 8vh;
height: 8vh;
text-align: center;
vertical-align: middle;
text-decoration: none;
display: table-cell;
font-size: 3vh;
cursor: pointer;
border-radius: 100%;
z-index: 999;
position: relative;
box-shadow: inset 6px -6px 8px 1px rgba(224, 211, 185, 0.8), inset -16px 14px 10px 5px rgba(255, 255, 255, 0.8);
transition: 0.25s ease;
text-transform: uppercase;
z-index: 999;
filter: blur(0.05em);
-webkit-filter: blur(0.05em);
}
.logoButton:hover, .logoButton:active{
box-shadow: inset 6px -6px 0.8em 1px rgba(255, 255, 255, 0.8), inset -16px 18px 0.8em 0.05em rgba(224, 211, 185, 0.8);
filter: blur(0em);
-webkit-filter: blur(0em);
}
.centeredBox{
margin: auto;
border-radius: 5em;
background: floralwhite;
text-align: center;
font-size: 1.2em;
padding: 0.6em;
vertical-align: middle;
margin: auto;
height: 90%;
display: flex;
flex-wrap : nowrap;
flex-direction: column;
justify-content: center;
align-items : stretch;
flex-direction: column;
align-content : space-between;
/* box-shadow: inset 6px -6px 0.5em 1px rgba(224, 211, 185, 0.5), inset -16px 14px 10px 5px rgba(255, 255, 255, 0.8);
transition: 0.25s ease;
*/
}
.centeredBox small{
text-align: center;
align-content : flex-end;
}
.part1, .part2, .part3, .part4, .part5{
border-radius: 100em;
background: floralwhite;
text-align: center;
box-shadow: inset 6px -6px 0.5em 1px rgba(224, 211, 185, 0.5), inset -16px 14px 10px 5px rgba(255, 255, 255, 0.8);
transition: 0.25s ease;
vertical-align: middle;
filter: blur(0.1em);
-webkit-filter: blur(0.1em);
}
.part1:hover, .part2:hover, .part3:hover, .part4:hover, .part5:hover, .part5:active {
box-shadow: inset -21px 26px 50px -51px #FFFAF0, inset 10px -13px 50px -31px #FFFAF0, inset 34px -36px 50px 35px rgba(255, 255, 255, 0.6), inset -31px 37px 50px 32px rgba(224, 211, 185, 0.25);
filter: blur(0em);
-webkit-filter: blur(0em);
}
/*
.centeredBox, .slideshowBox{
width:100%;
height: 100%;
float: left;
}
*/
.centeredBox p {
position: relative;
padding: 1em;
height:20px;
top: 5%;
transform: translateY(-50%);
text-align: center;
vertical-align: middle;
}
.part1 {
width:50%;
height: 30%;
float: left;
}
.part1 p{
position: relative;
height:20px;
top: 40%;
transform: translateY(-50%);
}
.part2 {
width:50%;
height: 30%;
float: left;
}
.part2 p{
position: relative;
height:20px;
top: 40%;
transform: translateY(-50%);
}
.part3 {
width:50%;
height: 30%;
float: left;
}
.part3 p{
position: relative;
height:20px;
top: 40%;
transform: translateY(-50%);
}
.part4 {
width:50%;
height: 30%;
float: left;
}
.part4 p{
position: relative;
height:20px;
top: 40%;
transform: translateY(-50%);
}
.part5 {
width:65%;
height: 33%;
margin: auto;
display:flex;
justify-content: center;
vertical-align: middle;
}
.part5 p {
position: relative;
text-align: center;
vertical-align: middle;
font-size: 6vw;
margin: auto;
/* transform: translateY(-50%); */
}
.selected{
color: #FFFAF0;
filter: blur(0.05em);
}
.slideshowBox{
border-radius: 4em;
background: floralwhite;
text-align: center;
font-size: 1.2em;
filter: drop-shadow(10px,10px,orange);
}
.slideshow-container{
height: 100%;
width: 90%;
padding-top: 0em;
padding-bottom: 0em;
border-radius: 4em;
margin: auto;
text-align: center;
vertical-align: middle;
}
.mySlides {
display: none;
text-align: center;
vertical-align: middle;
}
.projectWrapper {
z-index: 10;
display: inline-block;
text-align: center;
vertical-align: top;
margin-top: 5em;
/*overflow-y: scroll;
scroll-snap-type: y mandatory;*/
padding-bottom: 7.5em;
}
.oneProject {
padding-bottom: 7.5em;
/*scroll-snap-align: start;
scroll-snap-stop: always;*/
}
img {
/* vertical-align: middle; */
border-radius: 1em;
max-height: 75vh;
max-width: 75vw;
margin: auto;
display: block;
text-align: center;
}
.imgSmall {
max-height: 70vh;
}
/* Next & previous buttons */
.prev {
vertical-align: middle;
cursor: pointer;
position: absolute;
top: 10%;
left: 0em;
width: 40%;
padding-top: 17em;
padding-bottom: 17em;
color: rgba(0, 0, 0, 0);
font-size: 1.2em;
transition: 0.6s ease;
user-select: none;
}
/* Position the "next button" to the right */
.next {
vertical-align: middle;
cursor: pointer;
position: absolute;
top: 10%;
right: 0em;
width: 40%;
padding-top: 17em;
padding-bottom: 17em;
color: rgba(0, 0, 0, 0);
font-size: 1.2em;
transition: 0.6s ease;
user-select: none;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
color: rgba(0, 0, 0, 0);
}
/* Caption text */
.text {
font-size: 1.2em;
position: relative;
margin: auto;
display: block;
text-align: center;
padding-bottom: 0.5em;
font-family: sans-serif;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .6}
to {opacity: 1}
}
#media screen and (max-width: 1200px) {
h1 {
font-size: 4vw;
}
.socials {
font-size: 3vw;
}
.bottomcenterLinks {
font-size: 3vh;
}
.selected {
font-size: 3vh;
}
.centeredBox small{
font-size: 3vw;
}
}
#media screen and (max-width: 800px) {
.oneProject {
margin-bottom: 40%;
}
.projectWrapper {
margin-top: 30%;
}
.logoButton {
filter: blur(0.03em);
-webkit-filter: blur(0.03em);
}
.part5 {
filter: blur(0.06em);
-webkit-filter: blur(0.06em);
}
}
so, I think that it's because you added z-index directly to the about link tag in your css. Try adding z-index to the link wrapper div, in this case "bottomcenterLinks".
.bottomcenterLinks{
position: fixed;
bottom: 5%;
text-align: center;
text-decoration: none;
vertical-align: middle;
display: table-cell;
font-family: "FT88-Italic", sans-serif;
font-size: 3vh;
color: floralwhite;
z-index: 100;
}
now, a feedback for your website design:
it's a pretty innovative design but thinking in user experience i would change the buttons because when we first get into the page we can't understand the purpose of the buttons because they don't have proper names, I mean, self explanatory names. i understand that you wanted to use your name first letters but for the purpose of a portfolio or even another type of website you're building, I think is better building something that will literaly guide the user through the website. think about it!
also, this about link that you're trying to make appear, i think it would be better if you style it like the buttons with your name first letters, it would make it stand out better. oh and i think that instead of having only about, you could have about me written there because when I first saw it I couldn't understand what that about link is supposed to be I mean, is about what, the projects, you, the page?
last but not less important, the blur in your buttons in a user perspective seems like the content is not in a good quality. i don't understand what you wanted it to look like but if you like it that way, no need to change, except if you want to prioritize user exp! besides this, i wouldn't fix anything else, i really enjoyed your design, is cute, innovative, simple, you're doing well!
sry about the big comment tho, but i hope you understand my feedback!
I'm trying to create a hover effect where words appear over the hero section when the mouse hovers over it. If you uncomment the code at the bottom of the CSS file you will see that the code works just fine. The only problem is the backround picture dispears and turns completely white. I don't know how to fix it.
Uncomment the code all the way at the bottom of the CSS to see what I'm talking about
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Kumbh Sans", sans-serif;
scroll-behavior: smooth;
}
.navbar {
background: #131313;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 555;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 0 20px;
}
#navbar__logo {
background-color: #ff8d02;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
#trade {
background-color: #0045f2;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
position: relative;
font-size: 13px;
bottom: 6px;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
}
.navbar__item {
height: 80px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
width: 120px;
text-decoration: none;
height: 100%;
transition: all 0.3s ease;
}
.navbar__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
width: 100%;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
padding: 10px 20px;
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius: 4px;
background: #833ab4;
background: -webkit-linear-gradient(to right, rgb(240, 105, 2), #8c8393, #4d7fff);
background: linear-gradient(to right, rgb(240, 105, 2), #8c8393, #4d7fff);
color: #fff;
transition: all 0.3s ease;
}
.navbar__btn:after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 0;
height: 100%;
border-radius: 4px;
transition: all 1s ease;
}
.navbar__links:hover {
color: #ff7802;
transition: all 0.3s ease;
}
#media screen and (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
.navbar__menu {
display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: -1000px;
opacity: 1;
transition: all 0.5s ease;
z-index: -1;
}
.navbar__menu.active {
background: #131313;
top: 100%;
opacity: 1;
transition: all 0.5s ease;
z-index: 99;
height: 60vh;
font-size: 1.6rem;
}
#navbar__logo {
padding-left: 25px;
}
.navbar__toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #fff;
}
.navbar__item {
width: 100%;
}
.navbar__links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}
.navbar__btn {
padding-bottom: 2rem;
}
.button {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80px;
margin: 0;
}
#mobile-menu {
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
}
.navbar__toggle .bar {
display: block;
cursor: pointer;
}
#mobile-menu.is-active .bar:nth-child(2) {
opacity: 0;
}
#mobile-menu.is-active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
#mobile-menu.is-active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
}
/* Hero Section */
.hero {
padding: 50px 0;
background-image: url(./images/brooke-cagle-g1Kr4Ozfoac-unsplash.jpg);
background-size: cover;
overflow: hidden;
position: relative;
background-position: top;
display: flex;
flex-direction: column;
}
.hero__heading {
color: #fff;
font-size: 100px;
margin-left: 30px;
text-shadow: 2px 2px 8px #000000c4;
}
.orange {
color: rgb(255, 89, 0);
}
.main__btn {
margin: 0 auto;
margin-top: 3rem;
}
.main__btn a {
color: #fff;
text-decoration: none;
z-index: 2;
position: relative;
padding: 10px 20px;
font-size: 1.8rem;
}
.button__color {
background: -webkit-linear-gradient(to right, #1e5dff, rgb(255, 89, 0) );
background: linear-gradient(to right, #1e5dff, rgb(255, 89, 0));
}
/*
.hero_two {
position: relative;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #ffffff;
opacity: 0;
transition: all 0.25s ease;
}
.hero_two > * {
transform: translateY(20px);
transition: all 0.25s ease;
}
.hero_two:hover {
opacity: 1;
}
.hero_two:hover {
transform: translateY(0);
} */
<!DOCTYPE html>
<html lang="en">
<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">
<title>Pigeon</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
</head>
<body>
<!-- Navbar Section -->
<nav class="navbar">
<div class="navbar__container">
Pigeon<small id="trade">TRADE</small>
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
Home
</li>
<li class="navbar__item">
About
</li>
<li class="navbar__item">
Services
</li>
<li class="navbar__btn">
Sign Up
</li>
</ul>
</div>
</nav>
<!-- Hero Section -->
<div class="hero_two hero" id="home">
<div class="hero__container">
<div class="image__overlay">
<div class="hero__content">
<h1 class="hero__heading">Get started <br>making your <span class="orange">online <br>business</span> today!</h1>
</div>
</div>
</div>
<div class="main__btn">
<button class="button button__color">Explore</button>
</div>
</div>
```
The problem is that you are overwriting the background-image property value from .hero when you add background: rgba(0, 0, 0, 0.6); for .hero_two
Use instead background-color: rgba(0, 0, 0, 0.6);
The property background is a shorthand for all background properties including background-image.
The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.
Read more here -> background property
See below
EDIT after comments:
You are using two classes on the SAME element. If you write some styles for hero_two it will overwrite the styles for hero. because you are selecting the same element.
If I understand correctly, you want to show an 'overlay' and make the text appear when hovering. You can use a pseudo-element for that ( :after in this case) and some tweaks in your css styling. ( Remove the hero_two classname because it's useless )
/* Hero Section */
.hero {
padding: 50px 0;
background-image: url("https://via.placeholder.com/150");
background-size: cover;
overflow: hidden;
position: relative;
background-position: top;
display: flex;
flex-direction: column;
}
.hero__heading {
color: #fff;
font-size: 100px;
margin-left: 30px;
text-shadow: 2px 2px 8px #000000c4;
}
.orange {
color: rgb(255, 89, 0);
}
.main__btn {
margin: 0 auto;
margin-top: 3rem;
}
.main__btn a {
color: #fff;
text-decoration: none;
z-index: 2;
position: relative;
padding: 10px 20px;
font-size: 1.8rem;
}
.button__color {
background: -webkit-linear-gradient(to right, #1e5dff, rgb(255, 89, 0));
background: linear-gradient(to right, #1e5dff, rgb(255, 89, 0));
}
.hero:after {
content: "";
position: absolute;
background-color: rgba(255, 255, 255, 0.6);
top: 0;
opacity: 0;
width: 100%;
height: 100%;
}
.hero * {
transform: translateY(20px);
transition: all 0.25s ease;
opacity: 0;
}
.hero:hover * {
transform: translateY(0px);
color: #ffffff;
opacity: 1;
}
.hero:hover:after {
opacity: 1;
}
<div class="hero_two hero" id="home">
<div class="hero__container">
<div class="image__overlay">
<div class="hero__content">
<h1 class="hero__heading">Get started <br>making your <span class="orange">online <br>business</span> today!</h1>
</div>
</div>
</div>
<div class="main__btn">
<button class="button button__color">Explore</button>
</div>
</div>
Next time please share only relevant code ( eg. navbar has nothing to do with this ) and take the time to make a code snippet like the one above that reproduces your problem. ( For images, please use a placeholder as we cannot use your own images 'cause we don't have them )
happy coding.
Image hover overlay is working on all other platforms that I have tested (desktop, android, etc.) but it doesn't seem to work on iPhone. Can anyone point me in the right direction, please? I'm not sure if it is to do with the z-index or whether it might need web-kits?
When you hover or click on .service it should show the overlay text. Please see below the code:
.service {
position: relative;
width: 80%;
height: 200px;
margin: 60px 10%;
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
transition: all 0.3s;
}
.main-img-title {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 2.5em;
font-weight: 700;
color: #f8f9fa;
opacity: 1;
transition: 0.5s;
}
.img-title {
background-color: rgba(0, 0, 0, 0.7);
padding: 2px 10px;
font-size: 1.1em;
}
.img-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0 1%;
background: rgba(0, 0, 0, 0.7);
color: #f8f9fa;
display: flex;
flex-direction: wrap;
justify-content: center;
align-items: flex-end;
text-align: center;
opacity: 0;
}
.service:hover .main-img-title .img-title {
animation-name: title-slide-up;
animation-duration: 0.3s;
animation-fill-mode: forwards;
z-index: 50;
background-color: rgba(0, 0, 0, 0);
}
.service:hover .img-overlay {
opacity: 1;
}
#service-event:hover .main-img-title .img-title {
animation-name: title-slide-up-low;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
.overlay-img-description {
font-size: 18px;
height: 70%;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0 1%;
width: 100%;
max-height: 200px;
}
.overlay-img-description ul {
padding: 0;
}
.overlay-img-description li {
display: inline-block;
font-size: 20px;
}
.overlay-img-description li+li::before {
content: "";
display: inline-block;
vertical-align: middle;
margin: 0 13px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: currentColor;
}
.overlay-img-description p {
margin: 10px 0 0 0;
font-size: 0.9em;
}
#keyframes title-slide-up-low {
from {
transform: translateY(0)
}
to {
transform: translateY(-45px)
}
}
<div id="service-event" class="service">
<img class="bg-img" src="Images/Steel .JPG" alt="Steel" id="steel">
<div class="main-img-title">
<div class="img-title" id="steel-title">STEEL</div>
</div>
<div class="img-overlay">
<p class="overlay-img-description" id="steel-desc">Our steel crews are experienced with the construction of system scaffolding, black steel tower and truss structures. We specialise in supplying steel climbing teams with the support of steelhand ground labourers as well as plant operators who are
familiar with the requirements of truss and steel assembly.</p>
</div>
</div>
add z-index for img-title and img-overlay, define higher value for img-overlay that will fixed your issue.
The pseudo-class :hover is not supported on mobile devices.
See this question for an alternative to :hover
If you use :active selector in combination with :hover you can achieve this according to w3schools as long as the :active selector is called after the :hover selector.
.info-slide:hover, .info-slide:active{
height:300px;
}
EDIT:
Because :active doesn't work in safari, an alternative is adding an onclick="function()" to the uppermost element. function() should create the desired changes on the webpage. The downside to this solution is the mobile user has to click the element again to close it, instead of it automatically closing.
I'm trying to make a website by incorporating several sliders in one : seven css sliders in a bootstrap slider.
Everything is working fine, but I have an issue :
I want the CSS slider always centered in my right page = in the Bootstrap slider (it's the burden).
BUT I want to have the buttons of the bootstrap slider (in my case, it's the white bar with the strawberry) fixed on my left container. I want them to stay sticked between the two blocs in any resolution, witch is working fine.
I have centered once the CSS slider, but it moves the buttons with and I don't want that.
Idk what I'm messing up. Thanks for your help guys.
Here's my code (I cleaned it the best I could):
/* ----------------------------------------------------------
-------------------------------------------------------------
MAIN
-------------------------------------------------------------
------------------------------------------------------------- */
.container-fluid {
padding: 0;
}
.row {
margin: 0;
height: 100vh;
position: relative;
}
/* ----------------------------------------------------------
-------------------------------------------------------------
SPLIT LEFT
-------------------------------------------------------------
------------------------------------------------------------- */
#wrapper {
height: 100vh;
}
/* ----------------------------------------------------------
-------------------------------------------------------------
KITS & DESCRIPTIONS
-------------------------------------------------------------
------------------------------------------------------------- */
.carousel-inner aside {
text-align: center;
margin-top: 16px;
font-size: 20px;
font-weight: bold;
line-height: 28px;
color: #D87489;
letter-spacing: 1px;
}
.carousel-inner .link-more {
text-align: center;
margin-top: 12px;
font-size: 16px;
opacity: .5;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.carousel-inner .link-more a {
color: #000;
}
.carousel-inner .link-more:hover {
opacity: .9;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.carousel-inner .link-more i {
font-size: 19px;
opacity: .8;
transform: rotate(-45deg);
font-weight: bold;
padding-right: 5px;
}
/* ---------------------------------------------------
SLIDER BT
---------------------------------------------------- */
.carousel-indicators li img {
position: relative;
transition: all ease .2s;
display: block;
}
.carousel-indicators li img:hover {
opacity: .9;
transition: all ease .2s;
}
.bouton-dv-fraise,
.bouton-dv-fraise i,
a.fraise-link {
color: #E7918B !important;
}
.carousel-indicators li::after,
.carousel-indicators li::before {
display: none;
}
/*
.carousel {
width: 400px;
height: 400px;
margin: auto !important;
}
*/
.carousel ul {
width: calc(178px - 65px);
height: 698px;
padding: 26px 33px;
position: absolute;
top: 0;
left: 0;
background-color: #FFF;
margin-top: 50vh;
margin-left: -57px;
transform: translateY(-50%);
list-style-type: none;
}
.carousel-item {
width: 280px!important;
}
.carousel-indicators {
display: block;
position: relative;
}
.carousel-indicators li {
height: auto;
width: 100%;
}
.carousel-indicators img {
height: 50px;
margin: 26px 0px 40px -5px;
}
.carousel-control-prev-icon,
.carousel-control-next {
display: none;
}
/* ----------------------------------------------------------
-------------------------------------------------------------
SLIDER CSS INNER
-------------------------------------------------------------
------------------------------------------------------------- */
.slider {
height: 500px;
position: relative;
overflow: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.slider__nav {
width: 10px;
height: 10px;
margin: 36px 12px;
border-radius: 50%;
z-index: 10;
outline: 6px solid #D87489;
opacity: .47;
outline-offset: -6px;
box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.slider__nav:checked {
-webkit-animation: check 0.4s linear forwards;
animation: check 0.4s linear forwards;
opacity: 1 !important;
}
.slider__nav:checked:nth-of-type(1)~.slider__inner {
left: 0%;
}
.slider__nav:checked:nth-of-type(2)~.slider__inner {
left: -100%;
}
.slider__nav:checked:nth-of-type(3)~.slider__inner {
left: -200%;
}
.slider__nav:checked:nth-of-type(4)~.slider__inner {
left: -300%;
}
.slider__inner {
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 100%;
-webkit-transition: left 0.4s;
transition: left 0.4s;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
}
.slider__contents {
height: 100%;
padding: 2rem;
text-align: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.slider__image {
font-size: 2.7rem;
color: #2196F3;
}
.slider__caption {
font-weight: 500;
margin: 2rem 0 1rem;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
text-transform: uppercase;
}
.slider__txt {
color: #999;
margin-bottom: 3rem;
max-width: 300px;
}
#-webkit-keyframes check {
50% {
outline-color: #333;
box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
}
100% {
outline-color: #333;
box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
}
}
#keyframes check {
50% {
outline-color: #333;
box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
}
100% {
outline-color: #333;
box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
}
}
<header>
<div>
<div>
<div>
<div data-ride="carousel" data-interval="false">
<ul>
<li data-target="#carouselExampleIndicators" data-slide-to="0"><img src="https://keeth.fr/wp-content/uploads/2018/10/icon-fraise-couleur.png" alt="" /></li>
</ul>
<div>
<div>
<div><input title="slide1" checked="checked" name="slider-fraise" type="radio" /> <input title="slide2" name="slider-fraie" type="radio" />
<div>
<div><img src="https://keeth.fr/wp-content/uploads/2018/10/pack-fraise.png" alt="" /></div>
<div><img src="https://keeth.fr/wp-content/uploads/2018/10/pack-fraise.png" alt="" /></div>
</div>
</div>
<aside>Kit de blanchiment dentaire<br />goût fraise tendresse</aside>
<div> en savoir plus</div>
</div>
</div>
Previous Next </div>
</div>
Previous Next </div>
</div>
</header>
I did my best to make it clear, I put only one slide in it :)
Feel free to ask for more informations if needed. Thanks for your support ;;
Here is the website if needed.
This might work actually. I know it's not the best answer but still :p ....
Change this
<div class="content-header">
to
<div class="content-header" style="width: 600px;">
and edit
.carousel-inner {
width: 280px;
margin: auto;
padding-top: 50px;
}
.carousel-item {
width: 280px!important;
margin: auto;
}
in your style.css.
Well I saw a bad answer, I saw some bad code so... Here is my bad solution.
Add margin 0 auto to content-header & carousel-inner.
Now to put the buttons back in their place (.carousel-indicators):
Lose the negative margin-left
Change left: 0 to left: calc(200px - 31vw);
Lose the margin top on this element as well and put margin-top on content-header.
Once again, I would not recommend this solution but your code is already so funky that maybe this is your solution
I founded an okay solution thanks to Aditya Jangid.
I set the .content-header at 58% (as with the Bootstrap class but it didin't move all my design) and I set my margin to auto for the .carousel-item.
I know my code isn't very clean, but, it's my first one with js and BT and all, I'm still learning ;) It's a kind of a crash test haha.
Thanks for your support ! You're the best.
I'm trying to create a responsive design with the possibility of having a button that looks like it "floats" under a div element.
In Opera and Chrome I get what I want:
This is what happens in Firefox:
You can view my full code here:
https://jsfiddle.net/fej93gg5/
How can I fix this?
Edit: I found a bug report for Firefox here. It seems, this bug exists for very long time so I can't rely on it being fixed soon. Now I'm looking for a workaround.
<div class="blockcontainer-2col with-outline vertical-center ">
<div class="blockcontainer-content">
<h2 class="titlecontent-2col">Some title</h2>
<div class="textcontent">
<ul class="bulletlist">
<li>Blah blah</li>
<li>Blub blub</li>
<li>Whoopdi doopdi hokus pokus kdkjeljer</li>i>
</ul>
<!-- This button is not supposed to resize the outline -->
<div style="display: float; font-size: 1.7em; text-align: center; font-weight: bold;">
<a class="flatblockbutton" href="http://bluedomainer.com/portfolio/">Check out portfolio</a>
</div>
</div>
</div>
</div>
This is the full css:
/* reset all margins and borders to zero */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video {
margin:0;
padding:0;
border:0;
font:inherit;
vertical-align:baseline
}
/*trick to vertically align anything */
.vertical-center
{
display: flex;
align-items: center;
justify-content: center;
}
/* make white transparent outline */
.with-outline {
outline: thick solid;
outline-color: rgba(255, 255, 255, .5);
outline-width: 1rem;
background-color: white;
}
body {
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:100%;
}
.wholecontainer-2col {
background-color: violet;
padding: 1rem;
}
/*parent*/
.colcontainer-2col {
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
align-content: center;
text-align: center;
}
/* every flex child */
.blockcontainer-2col {
margin: 2rem;
padding:0;
}
/* make items resizable */
.resizable {
display: table-cell;
width: auto;
max-height: 27rem; /*THIS*/
}
/* Title format */
.titlecontent-2col {
padding-top: 20px;
text-align: center;
padding: 1em;
line-height:2rem;
font-size:2rem;
font-family: "Open Sans", sans-serif;
font-weight:bold;
color:#4d4c4c;
}
/* Text format */
.textcontent {
text-align: justify;
font-family:"Droid Sans",sans-serif;
color:#696969;
}
/* Bullet list format */
.bulletlist {
counter-reset: foo;
display: table;
font-size: 1.7rem;
text-align: left;
margin:0 auto;
list-style-position:inside;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.bulletlist>li {
list-style: none;
counter-increment: foo;
display: table-row;
text-align: justify;
}
.bulletlist>li::before {
content: "•";
display: table-cell;
text-align: right;
padding-right: .3em;
}
.flatblockbutton {
box-sizing: border-box;
text-decoration:none;
box-shadow: 0px 2px 7px 5px rgba(0,0,0,0.12);
padding: 1rem 4rem;
font-family: Proxima,Helvetica,sans-serif;
line-height: 1rem;
background-color: rgba(0, 129, 186, 1);
color: #fff;
border: none;
cursor: pointer;
display: inline-block;
font-size: 1rem;
font-weight: 600;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 3px;
-webkit-font-smoothing: antialiased;
-webkit-transition: 500ms linear 0s;
-moz-transition: 500ms linear 0s;
-o-transition: 500ms linear 0s;
transition: 500ms linear 0s;
position: relative;
top: 2rem;
left: 0rem;
overflow:hidden;
}
.flatblockbutton:hover, .flatblockbutton:focus {
background: rgba(16, 145, 202, 1);
text-shadow: -1px 1px 10px #ffc, 1px -1px 8px #ffffff;
box-shadow: 5px 7px 12px 10px rgba(0,0,0,0.14);
top: 1.5rem;
left: -0.5rem
}
This is related to a long standing Firefox Bug #687311
I realized that I didn't have to insist on using outline. I got rid of outline and used border for replacement. If you don't have to use outline, this solution is a very convenient workaround.
In other words instead of:
/* make white transparent outline - buggy in Firefox*/
.with-outline {
outline: thick solid;
outline-color: rgba(255, 255, 255, .5);
outline-width: 1rem;
background-color: white;
}
I used
/* make white transparent border - works in Firefox*/
.with-outline {
border: 1rem solid rgba(255, 255 ,255,.5);
background-color: rgba(255, 255, 255, 1);
-moz-background-clip: padding; /* Firefox 3.6 */
-webkit-background-clip: padding; /* Safari 4? Chrome 6? */
background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
}
You also may want to rename your class from with-outline to with-border.
The background-clip is necessary, otherwise the background color will overlap with border.
https://jsfiddle.net/pjc0xmh8/