my "wrapper" div is the most outlayer container. It consists of a picure and some text below.
I want to use CSS (not yet learned JS...) method to realize the effect that, when mouse hovering over the picure area, the picure zoom-in a little, but still remain inside the shadowed box.
Below is my html code and css code. It did give me zoom-in effect, but the picture just ... stick out, how can I fix this (hopefully without using Javascript)
-- html code --
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>shadow block | link with graphics and info</title>
<link rel="stylesheet" type="text/css" href="sectionlink_pic.css">
</head>
<body>
<div class="wrapper">
<div class="image">
<img src="https://images.pexels.com/photos/262508/pexels-photo-262508.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
</div>
<div class="infocontent">
<h3>Home Security Blog</h3>
</div>
</div>
</body>
</html>
-- css --
.wrapper {
display: flex;
flex-direction: column;
width: 400px;
justify-content: center;
align-items: center;
border-radius: 3rem;
box-shadow: 0.6rem 0.6rem 1.2rem #d2dce9, -0.5em -0.5em 1em #ffffff;
padding: 2rem;
z-index: 100;
}
.wrapper:hover {
text-shadow: 5px 5px 4px lightgray;
transition-duration: 0.2s;
cursor: pointer;
}
.wrapper .image img {
width: 100%;
object-fit: cover;
border-radius: 2rem;
cursor: pointer;
}
.wrapper .image:hover img {
transform: scale(1.5);
}
.wrapper .infocontent {
display: flex;
justify-content: center;
align-items: center;
font-family: Consolas;
color: #36187d;
cursor: pointer;
}
body {
background-color: #f2f3f7;
padding-top: 90px;
padding-left: 100px;
}
Add transition to your image
Add overflow (hidden) and border-radius to the image wrapper DIV:
body {
background-color: #f2f3f7;
}
.wrapper {
display: flex;
flex-direction: column;
width: 400px;
justify-content: center;
align-items: center;
border-radius: 3rem;
box-shadow: 0.6rem 0.6rem 1.2rem #d2dce9, -0.5em -0.5em 1em #ffffff;
padding: 2rem;
z-index: 100;
transition-duration: 0.2s; /* ADD */
}
.wrapper:hover {
text-shadow: 5px 5px 4px lightgray;
cursor: pointer;
/*transition-duration: 0.2s; REMOVE */
}
.wrapper .image {
overflow: hidden; /* ADD */
border-radius: 2rem; /* ADD */
}
.wrapper .image img {
width: 100%;
object-fit: cover;
/* border-radius: 2rem; REMOVE */
cursor: pointer;
transition: transform 1s; /* ADD */
}
.wrapper:hover img { /* EDIT */
transform: scale(1.5);
}
.wrapper .infocontent {
display: flex;
justify-content: center;
align-items: center;
font-family: Consolas;
color: #36187d;
cursor: pointer;
}
<div class="wrapper">
<div class="image">
<img src="https://images.pexels.com/photos/262508/pexels-photo-262508.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
</div>
<div class="infocontent">
<h3>Home Security Blog</h3>
</div>
</div>
Related
I'm working on a mobile first project, it's a project on with HTML and CSS only, allowing us to learn how to do animation with CSS only. I have a problem with my project that I hope you can help me with.
Due to the circle animation when you load the page, the button "Explorer nos restaurants" is not working, like the animation is still there and overlapping the page, I can't find a way to avoid this..
Thanks in advance for all the help you can provide to me!
/* Barre de chargement */
.chargement {
width: 100%;
height: 100%;
position: absolute;
animation-name: loader;
animation-duration: 2s;
}
.chargement_bloc {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.chargement_bloc-cercle {
width: 130px;
height: 130px;
border-radius: 50%;
border: 15px solid #fff;
border-bottom-color: transparent;
animation-name: circle;
animation-duration: 2s;
animation-timing-function: ease-in-out;
visibility: hidden;
}
#keyframes circle {
0% {
visibility: visible;
transform: rotate(0deg);
}
99% {
visibility: visible;
transform: rotate(1500deg);
}
100% {
z-index: -1;
visibility: hidden;
}
}
#keyframes loader {
0% {
background-color: #9356DC;
z-index: 1;
}
99% {
z-index: 1;
background-color: #9356DC;
}
100% {
z-index: -1;
visibility: hidden;
}
}
/* + modifier media queries pc pour version feuille */
/* Header */
header {
box-sizing: border-box;
height: 4rem;
}
header h1 {
font-family: 'Shrikhand', sans-serif;
text-align: center;
margin-top: 1rem;
}
main {
width: 100%;
}
/* Localisation */
.localisation {
display: flex;
justify-content: center;
width: 100%;
background-color: #eaeaea;
height: 2.5rem;
align-items: center;
box-shadow: inset 0px 11px 3px -9px #CCC;
}
.localisation i {
margin-right: 0.5rem;
}
/* Réservation */
.reservation {
background-color: #f6f6f6;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.reservation h2 {
margin-bottom: 0;
margin-top: 3rem;
margin-right: 2rem;
margin-left: 2rem;
text-align: center;
}
.reservation p {
flex-wrap: wrap;
margin-bottom: 2rem;
margin-right: 2rem;
margin-left: 2rem;
text-align: center;
}
.reservation .btn {
display: block;
outline: none;
border: none;
cursor: pointer;
font-size: 16px;
font-family: 'Roboto', sans-serif;
color: #fff;
background-size: 200%;
background-image: linear-gradient(90deg, #FF79DA, #9356DC);
background-position: 80%;
text-decoration: none;
padding: 1rem 1rem 1rem 1rem;
border-radius: 2rem;
transition: all 0.4s ease-in-out;
box-shadow: 0 5px 5px #0000002e;
margin-bottom: 3rem;
}
.reservation .btn:hover {
transform: scale(1.05);
background-position: 30%;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<!--Meta-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ohmyfood - Page d'accueil</title>
<!--Link-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/accueil.css">
<!--FontAwesome-->
<script src="https://kit.fontawesome.com/ec6ba8c4d3.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- Barre de chargement -->
<div class="chargement">
<div class="chargement_bloc">
<div class="chargement_bloc-cercle"></div>
</div>
</div>
<!-- Header -->
<header>
<h1>ohmyfood</h1>
</header>
<!-- Localisation -->
<main>
<div class="localisation">
<i class="fa fa-map-marker"></i>
<p>Paris, Belleville</p>
</div>
<!-- Réservation + Bouton -->
<section class="reservation">
<h2>Réservez le menu qui vous convient</h2>
<p>Découvrez des restaurants d'exception, sélectionnés par nos soins.</p>
<button class="btn" type="button" href="#restaurants">Explorer nos restaurants</button>
</section>
You just need to add animation-fill-mode: forwards; to the .chargement class so that it remains on the last frame
.chargement {
width: 100%;
height: 100%;
position: absolute;
animation-name: loader;
animation-duration: 2s;
animation-fill-mode: forwards;
}
This question already has answers here:
Break long word with CSS
(6 answers)
Closed 1 year ago.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Floating Nav</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="nav">
<button>A</button>
<button>B</button>
<button>C</button>
<button>D</button>
</div>
<div id="root">
<p>xxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxx
</p>
</div>
</body>
</html>
CSS
html,
body {
height: 100%;
margin: 0;
flex-direction: column;
}
body,
#nav {
display: flex;
justify-content: center;
align-items: center;
}
#nav {
height: 4rem;
width: 90%;
background-image: linear-gradient(170deg, #37F7, #37F9);
justify-content: space-around;
border: 0.1rem solid #37F7;
border-radius: 1rem;
box-shadow: 0.15rem 0.3rem 0.3rem #04C3;
position: sticky;
top: 0;
z-index: 1;
}
button {
color: #000;
border: none;
height: 3rem;
width: 3rem;
border: 0.1rem solid #FFFA;
border-radius: 0.5rem;
background-color: #FFFA;
transition: transform 0.2s ease-in-out;
box-shadow: 0.05rem 0.1rem 0.1rem #04C3;
}
button:focus {
transform: scale(1.1);
background-color: #FFFC;
box-shadow: 0.1rem 0.2rem 0.2rem #04C4;
}
#root {
height: 80%;
width: 90%;
border: 1px solid red;
}
#media (orientation:landscape) {
html,
body {
flex-direction: row;
}
#nav {
height: 90%;
width: 4rem;
flex-direction: column;
}
#root {
width: 80%;
}
}
I've been trying to figure this out in ways such as
display:inline
display:inline-block
but it doesn't work.
It works when I manually put new line space inside the text but thats not what I want ultimately the text should just wrap around the limited given width instead of going past the width in a single line.
The solutions that exist online seem to be too complex for what I'm looking for, can anyone tell me whats going on here and how can I make it normal?
html,
body {
height: 100%;
margin: 0;
flex-direction: column;
}
body,
#nav {
display: flex;
justify-content: center;
align-items: center;
}
#nav {
height: 4rem;
width: 90%;
background-image: linear-gradient(170deg, #37F7, #37F9);
justify-content: space-around;
border: 0.1rem solid #37F7;
border-radius: 1rem;
box-shadow: 0.15rem 0.3rem 0.3rem #04C3;
position: sticky;
top: 0;
z-index: 1;
}
button {
color: #000;
border: none;
height: 3rem;
width: 3rem;
border: 0.1rem solid #FFFA;
border-radius: 0.5rem;
background-color: #FFFA;
transition: transform 0.2s ease-in-out;
box-shadow: 0.05rem 0.1rem 0.1rem #04C3;
}
button:focus {
transform: scale(1.1);
background-color: #FFFC;
box-shadow: 0.1rem 0.2rem 0.2rem #04C4;
}
#root {
height: 80%;
width: 90%;
border: 1px solid red;
}
#media (orientation:landscape) {
html,
body {
flex-direction: row;
}
#nav {
height: 90%;
width: 4rem;
flex-direction: column;
}
#root {
width: 80%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Floating Nav</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="nav">
<button>A</button>
<button>B</button>
<button>C</button>
<button>D</button>
</div>
<div id="root">
<p>xxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxx
</p>
</div>
</body>
</html>
Use the CSS on the parent overflow-wrap: break-word;
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
html,
body {
height: 100%;
margin: 0;
flex-direction: column;
}
body,
#nav {
display: flex;
justify-content: center;
align-items: center;
}
#nav {
height: 4rem;
width: 90%;
background-image: linear-gradient(170deg, #37F7, #37F9);
justify-content: space-around;
border: 0.1rem solid #37F7;
border-radius: 1rem;
box-shadow: 0.15rem 0.3rem 0.3rem #04C3;
position: sticky;
top: 0;
z-index: 1;
}
button {
color: #000;
border: none;
height: 3rem;
width: 3rem;
border: 0.1rem solid #FFFA;
border-radius: 0.5rem;
background-color: #FFFA;
transition: transform 0.2s ease-in-out;
box-shadow: 0.05rem 0.1rem 0.1rem #04C3;
}
button:focus {
transform: scale(1.1);
background-color: #FFFC;
box-shadow: 0.1rem 0.2rem 0.2rem #04C4;
}
#root {
height: 80%;
width: 90%;
border: 1px solid red;
overflow-wrap: break-word;
}
#media (orientation:landscape) {
html,
body {
flex-direction: row;
}
#nav {
height: 90%;
width: 4rem;
flex-direction: column;
}
#root {
width: 80%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Floating Nav</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="nav">
<button>A</button>
<button>B</button>
<button>C</button>
<button>D</button>
</div>
<div id="root">
<p>xxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxx
</p>
</div>
</body>
</html>
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.
I've made a site that has a section containing a background image. I've added two buttons (<a> elements) to it and I want to position them to the bottom center of the section. Is that possible without relative/absolute positioning?
If, so, how please?
.main-section {
background-image: url('../IMG/main-section-logo.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 80vh;
}
.main-section:hover,:focus {
transform:scale(1.015);
transition: 1s ease;
}
.main-section:not(:hover) {
transform:scale(1);
transition: 1s ease;
}
.buttons {
text-align: Center;
text-decoration: none;
}
.btn-red {
color: white;
border: 1px solid red;
padding: 1.3em 6.2em;
}
.btn-white {
color: red;
border: 1px solid white;
padding: 1.3em 5em;
}
<section class="main-section">
<div class="container">
<div class="buttons">
BUY NOW
WATCH TRAILER
</div>
</div>
</section>
Solution
By using flexbox
.container must occupy the entire verticle space by using height: 100%
Add flexbox set of properties on .container
.main-section .container {
height: 100%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
Apply auto top margin to .buttons, which will automatically extend its specified margin to occupy the extra space in the flex container
.main-section {
background-image: url('../IMG/main-section-logo.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 80vh;
}
.main-section:hover,:focus {
transform:scale(1.015);
transition: 1s ease;
}
.main-section:not(:hover) {
transform:scale(1);
transition: 1s ease;
}
.main-section .container {
height: 100%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.buttons {
margin-top: auto;
text-align: Center;
text-decoration: none;
}
.btn-red {
color: white;
border: 1px solid red;
padding: 1.3em 6.2em;
}
.btn-white {
color: red;
border: 1px solid white;
padding: 1.3em 5em;
}
<section class="main-section">
<div class="container">
<div class="buttons">
BUY NOW
WATCH TRAILER
</div>
</div>
</section>
Yes, you can do so using flexbox.
Try the code below
.buttons {
display: flex;
align-items: flex-end;
justify-content: center;
}
This should hopefully solve your problem.
Some resources to learn Flexbox:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://flexboxfroggy.com
What if you use flexbox on .main-section :
display: block;
Or
display: flex;
flex-direction: column;
Take a look at that https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
Is it ok for you with flexbox?
Axel,
Have a look at place-items: end;
*{box-sizing: border-box;}
.main-section {
background-image: url('../IMG/main-section-logo.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 80vh;
}
.main-section:hover,:focus {
transform:scale(1.015);
transition: 1s ease;
}
.main-section:not(:hover) {
transform:scale(1);
transition: 1s ease;
}
.buttons {
text-align: Center;
text-decoration: none;
width: 100%;/*Add this to get the elements centered*/
}
.btn-red {
color: white;
border: 1px solid red;
padding: 1.3em 6.2em;
}
.btn-white {
color: red;
border: 1px solid white;
padding: 1.3em 5em;
}
/*have a look # place-items: end;*/
.container{
height: 90vh;
display: grid;
place-items: end;
}
<section class="main-section">
<div class="container">
<div class="buttons">
BUY NOW
WATCH TRAILER
</div>
</div>
</section>
you can try it
.buttons{
display:flex;
flex-direction:column;
align-items:flex-end;
justify-content:center;
}
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically align elements in a div?
(28 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Center icon in a div - horizontally and vertically [duplicate]
(3 answers)
Closed 3 years ago.
I am trying to create a circle with a tag and putting icon inside that circle. But that icon is coming little down.
The position of your icon was due to the padding and the default line-height of your a element. You can try to remove the padding and set the line-height equal to the element height.
You can also use CSS flex to center your icon.
* {
box-sizing: border-box;
}
body {
background: black;
}
#no-padding {
box-sizing: border-box;
display: inline-block;
padding: 0;
line-height: 44px;
border: 1px solid #fff;
cursor: pointer;
border-radius: 50%;
margin-right: 1rem;
width: 44px;
height: 44px;
text-align: center;
transition: all 0.2s;
}
#flex {
display: inline-flex;
border: 1px solid #fff;
cursor: pointer;
border-radius: 50%;
margin-right: 1rem;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
i {
color: white;
}
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" />
</head>
<body>
<a id='no-padding'><i class="fab fa-facebook-f"></i></a>
<a id='flex'><i class="fab fa-facebook-f"></i></a>
</body>
</html>
Try this CSS:
* {
box-sizing: border-box;
}
body {
background: black;
}
a {
display: flex; /* Newly added */
align-items: center; /* Newly added */
border: 1px solid #fff;
cursor: pointer;
border-radius: 50%;
margin-right: 1rem;
width: 44px;
height: 44px;
text-align: center;
transition: all 0.2s;
}
i {
color: white;
}
a i {
margin: 0 auto; /* Newly added */
}
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" />
</head>
<body>
<a><i class="fab fa-facebook-f"></i></a>
</body>
</html>
Add these styles to icon.
display: inline-block;
padding: 0px 15px; /* changed style */
border: 1px solid #fff;
cursor: pointer;
border-radius: 50%;
margin-right: 1rem;
width: 44px;
height: 44px;
text-align: center;
transition: all 0.2s;
line-height: 44px; /* added style */
You can do by using line height try this:
a {
display: inline-block;
border: 1px solid #fff;
cursor: pointer;
border-radius: 50%;
width: 44px;
height: 44px;
line-height: 44px;
align-items: center;
text-align: center;
justify-content: center;
transition: all 0.2s;
}
I think, flexbox is the simplest solution, just add these lines to your "a" tag:
display: flex;
justify-content:center;
align-items:center;