I've built a modal where in the header, there's a tooltip explaining certain points to a user of the modal for clarity.
The problem I am running into is that the tooltip isn't behaving properly. The tooltip text is over lapping the modal instead of hovering above it when your cursor passes over it.
Edit* Preview of my first attempt on https://jsfiddle.net/rjfz47na/
Feature Code:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.woocommerce-MyAccount-content:not(.content-edit-account) {
float: none;
margin: 0 0 30px 0;
width: 100%;
border: 1px solid #DEDEDE;
}
.woocommerce-account {
clear: both;
}
a, a:hover {
text-decoration: none;
}
a {
color: #2ea3f2;
}
h4 {
font-family: "DIN Next Slab Pro Bold", serif;
text-transform: uppercase;
color: #1b1b1b;
padding-bottom: 0;
}
h4 {
font-size: 18px;
}
h1, h2, h3, h4, h5, h6 {
color: #333;
padding-bottom: 10px;
line-height: 1em;
font-weight: 500;
}
.woocommerce-account .ps-courses__image img {
height: auto;
width: 20px;
}
img {
max-width: 100%;
height: auto;
}
</style>
<style>
body {
align-items: center;
background: #F1EEF1;
display: flex;
font-family: sans-serif;
justify-content: center;
height: 100vh;
margin: 0;
}
.container {
align-items: center;
/* background: #F1EEF1;
border: 1px solid #D2D1D4;
*/ display: flex;
height: 365px;
justify-content: center;
width: 700px;
}
.email {
background: #DEDBDF;
border-radius: 16px;
height: 32px;
overflow: hidden;
position: relative;
width: 180px;
text-align: center;
-webkit-tap-highlight-color: transparent;
transition: width 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
height 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
border-radius 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.email:not(.expand) {
cursor: pointer;
}
.email:not(.expand):hover {
background: #C2C0C2;
}
.from {
position: absolute;
transition: opacity 200ms 100ms cubic-bezier(0.0, 0.0, 0.2, 1);
}
.from-contents {
display: flex;
flex-direction: row;
transform-origin: 0 0;
transition: transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.to {
opacity: 0;
position: absolute;
transition: opacity 100ms cubic-bezier(0.4, 0.0, 1, 1);
}
.to-contents {
transform: scale(.55);
transform-origin: 0 0;
transition: transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.avatar {
border-radius: 12px;
height: 24px;
left: 18px;
position: relative;
top: -11px;
width: 85px;
}
.name {
font-size: 14px;
line-height: 32px;
width: 180px;
}
.top {
background: #2c5424;
display: flex;
flex-direction: row;
height: 70px;
transition: height 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
width: 700px;
}
.avatar-large {
border-radius: 21px;
height: 42px;
margin-left: 12px;
position: relative;
top: 26px;
width: 100px;
color: #FFFFFF;
}
.name-large {
color: #ffffff;
font-size: 16px;
line-height: 70px;
margin-left: 100px;
}
.x-touch {
align-items: center;
align-self: center;
cursor: pointer;
display: flex;
height: 50px;
justify-content: center;
margin-left: auto;
width: 50px;
}
.x {
background: #ffffff;
border-radius: 10px;
height: 20px;
position: relative;
width: 20px;
}
.x-touch:hover .x {
background: #E1D9D1;
}
.line1 {
background: #2C5424;
height: 12px;
position: absolute;
transform: translateX(9px) translateY(4px) rotate(45deg);
width: 2px;
}
.line2 {
background: #2C5424;
height: 12px;
position: absolute;
transform: translateX(9px) translateY(4px) rotate(-45deg);
width: 2px;
}
.bottom {
background: #FFF;
color: #444247;
font-size: 14px;
height: 295px;
padding-top: 5px;
width: 700px;
overflow-y: auto;
}
.row {
align-items: center;
display: flex;
flex-direction: row;
height: 85px;
}
.twitter {
margin-left: 16px;
height: 30px;
position: relative;
top: 0px;
width: 30px;
}
.medium {
height: 30px;
margin-left: 16px;
position: relative;
width: 30px;
}
.link {
margin-left: 16px;
}
.link a {
color: #444247;
text-decoration: none;
}
.link a:hover {
color: #777579;
}
.email.expand {
border-radius: 6px;
box-shadow: 0 10px 20px rgba(0,0,0,0.10), 0 6px 6px rgba(0,0,0,0.16);
height: 365px;
width: 700px;
}
.expand .from {
opacity: 0;
transition: opacity 100ms cubic-bezier(0.4, 0.0, 1, 1);
}
.expand .from-contents {
transform: scale(1.91);
}
.expand .to {
opacity: 1;
transition: opacity 200ms 100ms cubic-bezier(0.0, 0.0, 0.2, 1);
}
.expand .to-contents {
transform: scale(1);
}
.p2{
padding: 0 12px;
}
/* button div */
#buttons {
padding-top: 50px;
text-align: center;
}
/* start da css for da buttons */
.btn {
border-radius: 5px;
padding: 1px 5px;
font-size: 14px;
text-decoration: none;
color: #fff;
position: relative;
display: inline-block;
cursor: pointer;
}
.btn:active {
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
box-shadow: 0px 1px 0px 0px;
}
.green {
background-color: #15B358;
box-shadow: 0px 3px 0px 0px #218838;
}
.green:hover {
background-color: #28a745;
}
.red {
background-color: #e74c3c;
box-shadow: 0px 3px 0px 0px #CE3323;
}
.red:hover {
background-color: #dc3545;
}
.black {
background-color: #343a40;
box-shadow: 0px 5px 0px 0px #23272b;
font-size: 16px;
padding: 3px 12px;
}
.black:hover {
background-color: #23272b;
}
input {
border: none;
width: 170px;
height: 25px;
outline: none;
padding-left: 10px;
}
.tooltip {
position: relative;
background: #FFFFFF;
padding: 5px 10px;
margin: 5px;
font-size: 15px;
border-radius: 100%;
color: #2c5424;
animation: shake 500ms ease-in-out forwards;
}
.tooltip:before,
.tooltip:after {
position: absolute;
content: "";
opacity: 0;
transition: all 0.4s ease;
}
.tooltip:before {
border-width: 10px 8px 0 8px;
border-style: solid;
border-color: #ffffff transparent transparent transparent;
top: -15px;
transform: translateY(20px);
}
.tooltip:after {
content: attr(data-tooltip);
background: #2c5424;
width: 350px;
height: 95px;
font-size: 13px;
font-weight: 300;
top: -130px;
left: -10px;
padding: 10px;
border-radius: 5px;
letter-spacing: 1px;
transform: translateY(20px);
}
.tooltip:hover::before,
.tooltip:hover::after {
opacity: 1;
transform: translateY(-2px);
}
#keyframes shake {
0% {
transform: rotate(2deg);
}
50% {
transform: rotate(-3deg);
}
70% {
transform: rotate(3deg);
}
100% {
transform: rotate(0deg);
}
}
</style>
</head>
<body>
<div class="container">
<div class="email expand" onclick="this.classList.add('expand')">
<div class="from">
<div class="from-contents">
<div class="name">Assign Backup Cards</div>
</div>
</div>
<div class="to">
<div class="to-contents">
<div class="top">
<div class="avatar-large"><strong>HEADS UP!</strong></div>
<div class="name-large"><b>
You have <span id="card-count-total">3</span> unassigned Backup Cards.
</b>
<span class="tooltip" data-tooltip="This feature will allow you to assign your available pool of unassigned safety cards to either your course or courses you have purchased and sent out to other individuals. Once assigned, the cards will be mailed out when the course is completed.">?</span>
</div>
<div class="x-touch" onclick="document.querySelector('.email').classList.remove('expand');event.stopPropagation();">
<div class="x">
<div class="line1"></div>
<div class="line2"></div>
</div>
</div>
</div>
<div class="bottom">
<div class="row">
<div style="display: flex">
<div style="flex-shrink: 1;">
<div class="ps-courses__image">
</div>
</div>
<div style="padding-top: 26px; flex-grow: 1; flex-shrink: 0; display: grid; grid-template-columns: max-content 2fr 1fr; grid-auto-flow: column; text-align: center;">
<div style="text-align: left;padding-left: 10px;padding-bottom: 20px;">
<div> Test! Online Course </div>
<div> Voucher: HYH65-GF3C8 </div>
<div> Email: s***6#yahoo.com </div>
<a onclick="bcr_addCard('JN3SU-GF3C8')" class="btn green">Add Card</a>
<a onclick="bcr_removeCard('JN3SU-GF3C8')" class="btn red">Remove Card</a>
</div>
<div>
<span class="card-count" data-voucher="JN3SU-GF3C8">0</span> Cards
</div>
<div><b>This is your course </b></div>
</div>
</div>
</div>
<hr>
<div class="row">
<div style="display: flex">
<div style="flex-shrink: 1;">
<div class="ps-courses__image">
</div>
</div>
<div style="padding-top: 26px; flex-grow: 1; flex-shrink: 0; display: grid; grid-template-columns: max-content 2fr 1fr; grid-auto-flow: column; text-align: center;">
<div style="text-align: left;padding-left: 10px;padding-bottom: 20px;">
<div> Test! Online Course </div>
<div> Voucher: HYH65-GF3C8 </div>
<div> Email: s***6#yahoo.com </div>
<a onclick="bcr_addCard('JN3SU-GF3C8')" class="btn green">Add Card</a>
<a onclick="bcr_removeCard('JN3SU-GF3C8')" class="btn red">Remove Card</a>
</div>
<div>
<span class="card-count" data-voucher="JN3SU-GF3C8">0</span> Cards
</div>
<div><b>This is your course </b></div>
</div>
</div>
</div>
<hr>
<div class="row">
<div style="display: flex">
<div style="flex-shrink: 1;">
<div class="ps-courses__image">
</div>
</div>
<div style="padding-top: 26px; flex-grow: 1; flex-shrink: 0; display: grid; grid-template-columns: max-content 2fr 1fr; grid-auto-flow: column; text-align: center;">
<div style="text-align: left;padding-left: 10px;padding-bottom: 20px;">
<div> Test! Online Course </div>
<div> Voucher: HYH65-GF3C8 </div>
<div> Email: s***6#yahoo.com </div>
<a onclick="bcr_addCard('JN3SU-GF3C8')" class="btn green">Add Card</a>
<a onclick="bcr_removeCard('JN3SU-GF3C8')" class="btn red">Remove Card</a>
</div>
<div>
<span class="card-count" data-voucher="JN3SU-GF3C8">0</span> Cards
</div>
<div><b>This is your course </b></div>
</div>
</div>
</div>
<hr>
<div class="row">
<div style="display: flex">
<div style="flex-shrink: 1;">
<div class="ps-courses__image">
</div>
</div>
<div style="padding-top: 26px; flex-grow: 1; flex-shrink: 0; display: grid; grid-template-columns: max-content 2fr 1fr; grid-auto-flow: column; text-align: center;">
<div style="text-align: left;padding-left: 10px;padding-bottom: 20px;">
<div style="
padding-left: 0px;
"> Test! Online Course </div>
<div> Voucher: HYH65-GF3C8 </div>
<div> Email: s***6#yahoo.com </div>
<a onclick="bcr_addCard('JN3SU-GF3C8')" class="btn green">Add Card</a>
<a onclick="bcr_removeCard('JN3SU-GF3C8')" class="btn red">Remove Card</a>
</div>
<div>
<span class="card-count" data-voucher="JN3SU-GF3C8">0</span> Cards
</div>
<div><b>This is your course </b></div>
</div>
</div>
</div>
<hr>
<div class="row" style="display: flex; justify-content: center;">
Submit
</div>
</div>
</div>
</div>
</div>
</div>
</body></html>
Edit*: I'm trying to have the tooltip behave like what is seen in https://jsfiddle.net/dnu297g1/3/ while keeping the same position for the tooltip as my original attempt. Having it Beside the header of the modal on the right side.
HTML:
<form>
<div>
<span class="tooltip" data-tooltip="This feature will allow you to assign your available pool of unassigned safety cards to either your course or courses you have purchased and sent out to other individuals. Once assigned, the cards will be mailed out when the course is completed.">?</span>
</div>
</form>
CSS:
body {
background: #424B54;
font-family: "Source Sans Pro", sans-serif;
overflow: hidden;
}
form {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
height: 100vh;
}
input {
border: none;
width: 170px;
height: 25px;
outline: none;
padding-left: 10px;
}
.tooltip {
position: relative;
background: #2c5424;
padding: 5px 12px;
margin: 5px;
font-size: 15px;
border-radius: 100%;
color: #FFF;
}
.tooltip:before,
.tooltip:after {
position: absolute;
content: "";
opacity: 0;
transition: all 0.4s ease;
}
.tooltip:before {
border-width: 10px 8px 0 8px;
border-style: solid;
border-color: #ffffff transparent transparent transparent;
top: -15px;
transform: translateY(20px);
}
.tooltip:after {
content: attr(data-tooltip);
background: #2c5424;
width: 350px;
height: 95px;
font-size: 13px;
font-weight: 300;
top: -130px;
left: -10px;
padding: 10px;
border-radius: 5px;
letter-spacing: 1px;
transform: translateY(20px);
}
.tooltip:hover::before,
.tooltip:hover::after {
opacity: 1;
transform: translateY(-2px);
}
Here is a working snippet of what you want to achieve.
I had to do some modifications on the CSS code of your tooltip class.
Moreover, I added a div tag with an id="anim" that surrounds your span tag such as in the jsfiddle you attached in your post.
What the <div id="anim"> does is to trigger the shake HTML5 animation which does a slight rotation whenever you hover over your tooltip span tag.
Hope that can help you.
#keyframes shake {
0% {
transform: rotate(2deg);
}
50% {
transform: rotate(-3deg);
}
70% {
transform: rotate(3deg);
}
100% {
transform: rotate(0deg);
}
}
.woocommerce-MyAccount-content:not(.content-edit-account) {
float: none;
margin: 0 0 30px 0;
width: 100%;
border: 1px solid #DEDEDE;
}
.woocommerce-account {
clear: both;
}
a,
a:hover {
text-decoration: none;
}
a {
color: #2ea3f2;
}
h4 {
font-family: "DIN Next Slab Pro Bold", serif;
text-transform: uppercase;
color: #1b1b1b;
padding-bottom: 0;
}
h4 {
font-size: 18px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #333;
padding-bottom: 10px;
line-height: 1em;
font-weight: 500;
}
.woocommerce-account .ps-courses__image img {
height: auto;
width: 20px;
}
img {
max-width: 100%;
height: auto;
}
body {
align-items: center;
background: #fff;
display: flex;
font-family: sans-serif;
justify-content: center;
height: 125vh;
margin: 0;
}
.container {
align-items: center;
display: flex;
height: 100%;
max-height: 700px;
justify-content: center;
width: 730px;
top: 100px;
position: absolute;
padding: 20px;
z-index: 0;
}
.email {
background: #DEDBDF;
border-radius: 16px;
height: 32px;
overflow: hidden;
position: relative;
width: 180px;
text-align: center;
-webkit-tap-highlight-color: transparent;
transition: width 300ms cubic-bezier(0.4, 0.0, 0.2, 1), height 300ms cubic-bezier(0.4, 0.0, 0.2, 1), box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1), border-radius 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.email:not(.expand) {
cursor: pointer;
}
.email:not(.expand):hover {
background: #C2C0C2;
}
.from {
position: absolute;
transition: opacity 200ms 100ms cubic-bezier(0.0, 0.0, 0.2, 1);
}
.from-contents {
display: flex;
flex-direction: row;
transform-origin: 0 0;
transition: transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.to {
opacity: 0;
position: absolute;
transition: opacity 100ms cubic-bezier(0.4, 0.0, 1, 1);
}
.to-contents {
transform: scale(.55);
transform-origin: 0 0;
transition: transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.avatar {
border-radius: 12px;
height: 24px;
left: 18px;
position: relative;
top: -11px;
width: 85px;
}
.name {
font-size: 14px;
line-height: 32px;
width: 180px;
}
.top {
background: #2c5424;
display: flex;
flex-direction: row;
height: 100%;
align-items: center;
transition: height 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
width: 740px;
}
.avatar-large {
border-radius: 21px;
margin-left: 12px;
position: relative;
width: 100px;
color: #FFFFFF;
}
.name-large {
color: #ffffff;
font-size: 16px;
margin-left: 35px;
}
.x-touch {
align-items: center;
align-self: center;
cursor: pointer;
display: flex;
height: 50px;
justify-content: center;
margin-left: 30px;
width: 50px;
position: relative;
}
.x {
background: #ffffff;
border-radius: 10px;
height: 20px;
position: relative;
width: 20px;
}
.x-touch:hover .x {
background: #E1D9D1;
}
.line1 {
background: #2C5424;
height: 12px;
position: absolute;
transform: translateX(9px) translateY(4px) rotate(45deg);
width: 2px;
}
.line2 {
background: #2C5424;
height: 12px;
position: absolute;
transform: translateX(9px) translateY(4px) rotate(-45deg);
width: 2px;
}
.bottom {
background: #FFF;
color: #444247;
font-size: 14px;
height: 100%;
padding-top: 5px;
width: 730px;
overflow-y: auto;
}
.row {
align-items: center;
display: flex;
flex-direction: row;
height: 85px;
}
.twitter {
margin-left: 16px;
height: 30px;
position: relative;
top: 0px;
width: 30px;
}
.medium {
height: 30px;
margin-left: 16px;
position: relative;
width: 30px;
}
.link {
margin-left: 16px;
}
.link a {
color: #444247;
text-decoration: none;
}
.link a:hover {
color: #777579;
}
.email.expand {
border-radius: 6px;
box-shadow: 0 10px 20px rgb(0 0 0 / 10%), 0 6px 6px rgb(0 0 0 / 16%);
height: 100%;
width: 730px;
margin: 30px auto;
}
.expand .from {
opacity: 0;
transition: opacity 100ms cubic-bezier(0.4, 0.0, 1, 1);
}
.expand .from-contents {
transform: scale(1.91);
}
.expand .to {
opacity: 1;
transition: opacity 200ms 100ms cubic-bezier(0.0, 0.0, 0.2, 1);
}
.expand .to-contents {
transform: scale(1);
}
.p2 {
padding: 0 12px;
}
/* button div */
#buttons {
padding-top: 50px;
text-align: center;
}
/* start da css for da buttons */
.btn {
border-radius: 5px;
padding: 1px 5px;
font-size: 14px;
text-decoration: none;
color: #fff;
position: relative;
display: inline-block;
cursor: pointer;
}
.btn:active {
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
box-shadow: 0px 1px 0px 0px;
}
.green {
background-color: #15B358;
box-shadow: 0px 3px 0px 0px #218838;
}
.green:hover {
background-color: #28a745;
}
.red {
background-color: #e74c3c;
box-shadow: 0px 3px 0px 0px #CE3323;
}
.red:hover {
background-color: #dc3545;
}
.black {
background-color: #343a40;
box-shadow: 0px 5px 0px 0px #23272b;
font-size: 16px;
padding: 3px 12px;
}
.black:hover {
background-color: #23272b;
}
input {
border: none;
width: 170px;
height: 25px;
outline: none;
padding-left: 10px;
}
.tooltip {
position: relative;
background: #2c5424;
padding: 5px 12px;
margin: 10px;
font-size: 15px;
line-height: 17px;
border-radius: 100%;
color: #FFF;
margin-left: 35px;
}
.tooltip:before, .tooltip:after {
position: absolute;
content: "";
opacity: 0;
transition: all 0.4s ease;
}
.tooltip:before {
border-width: 10px 8px 0 8px;
border-style: solid;
border-color: #15B358 transparent transparent transparent;
top: 40px;
transform: translateY(40px);
line-height: 12px;
position: absolute;
}
.tooltip:after {
content: attr(data-tooltip);
background: #2c5424;
width: 250px;
height: 95px;
font-size: 10px;
font-weight: 300;
top: 45px;
padding: 10px;
border-radius: 5px;
letter-spacing: 1px;
transform: translateY(20px);
position: fixed;
z-index: 10000000;
display: block;
}
.tooltip:hover::before,
.tooltip:hover::after {
opacity: 1;
transform: translateY(-2px);
}
#keyframes shake {
0% {
transform: rotate(2deg);
}
50% {
transform: rotate(-3deg);
}
70% {
transform: rotate(3deg);
}
100% {
transform: rotate(0deg);
}
}
#anim:hover {
animation: shake 500ms ease-in-out forwards;
}
form {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
height: 100vh;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="container">
<div class="email expand" onclick="this.classList.add('expand')">
<div class="from">
<div class="from-contents">
<div class="name">Assign Backup Cards</div>
</div>
</div>
<div class="to">
<div class="to-contents">
<div class="top">
<div class="avatar-large"><strong>HEADS UP!</strong></div>
<div class="name-large"><b>
You have <span id="card-count-total">3</span> unassigned Backup Cards.
</b>
</div>
<div id="anim">
<span class="tooltip" data-tooltip="This feature will allow you to assign your available pool of unassigned safety cards to either your course or courses you have purchased and sent out to other individuals. Once assigned, the cards will be mailed out when the course is completed.">?</span>
</div>
<div class="x-touch" onclick="document.querySelector('.email').classList.remove('expand');event.stopPropagation();">
<div class="x">
<div class="line1"></div>
<div class="line2"></div>
</div>
</div>
</div>
<div class="bottom">
<div class="row">
<div style="display: flex">
<div style="flex-shrink: 1;">
<div class="ps-courses__image">
</div>
</div>
<div style="padding-top: 26px; flex-grow: 1; flex-shrink: 0; display: grid; grid-template-columns: max-content 2fr 1fr; grid-auto-flow: column; text-align: center;">
<div style="text-align: left;padding-left: 10px;padding-bottom: 20px;">
<div> Test! Online Course </div>
<div> Voucher: HYH65-GF3C8 </div>
<div> Email: s***6#yahoo.com </div>
<a onclick="bcr_addCard('JN3SU-GF3C8')" class="btn green">Add Card</a>
<a onclick="bcr_removeCard('JN3SU-GF3C8')" class="btn red">Remove Card</a>
</div>
<div>
<span class="card-count" data-voucher="JN3SU-GF3C8">0</span> Cards
</div>
<div><b>This is your course </b></div>
</div>
</div>
</div>
<hr>
<div class="row">
<div style="display: flex">
<div style="flex-shrink: 1;">
<div class="ps-courses__image">
</div>
</div>
<div style="padding-top: 26px; flex-grow: 1; flex-shrink: 0; display: grid; grid-template-columns: max-content 2fr 1fr; grid-auto-flow: column; text-align: center;">
<div style="text-align: left;padding-left: 10px;padding-bottom: 20px;">
<div> Test! Online Course </div>
<div> Voucher: HYH65-GF3C8 </div>
<div> Email: s***6#yahoo.com </div>
<a onclick="bcr_addCard('JN3SU-GF3C8')" class="btn green">Add Card</a>
<a onclick="bcr_removeCard('JN3SU-GF3C8')" class="btn red">Remove Card</a>
</div>
<div>
<span class="card-count" data-voucher="JN3SU-GF3C8">0</span> Cards
</div>
<div><b>This is your course </b></div>
</div>
</div>
</div>
<hr>
<div class="row">
<div style="display: flex">
<div style="flex-shrink: 1;">
<div class="ps-courses__image">
</div>
</div>
<div style="padding-top: 26px; flex-grow: 1; flex-shrink: 0; display: grid; grid-template-columns: max-content 2fr 1fr; grid-auto-flow: column; text-align: center;">
<div style="text-align: left;padding-left: 10px;padding-bottom: 20px;">
<div> Test! Online Course </div>
<div> Voucher: HYH65-GF3C8 </div>
<div> Email: s***6#yahoo.com </div>
<a onclick="bcr_addCard('JN3SU-GF3C8')" class="btn green">Add Card</a>
<a onclick="bcr_removeCard('JN3SU-GF3C8')" class="btn red">Remove Card</a>
</div>
<div>
<span class="card-count" data-voucher="JN3SU-GF3C8">0</span> Cards
</div>
<div><b>This is your course </b></div>
</div>
</div>
</div>
<hr>
<div class="row">
<div style="display: flex">
<div style="flex-shrink: 1;">
<div class="ps-courses__image">
</div>
</div>
<div style="padding-top: 26px; flex-grow: 1; flex-shrink: 0; display: grid; grid-template-columns: max-content 2fr 1fr; grid-auto-flow: column; text-align: center;">
<div style="text-align: left;padding-left: 10px;padding-bottom: 20px;">
<div style="
padding-left: 0px;
"> Test! Online Course </div>
<div> Voucher: HYH65-GF3C8 </div>
<div> Email: s***6#yahoo.com </div>
<a onclick="bcr_addCard('JN3SU-GF3C8')" class="btn green">Add Card</a>
<a onclick="bcr_removeCard('JN3SU-GF3C8')" class="btn red">Remove Card</a>
</div>
<div>
<span class="card-count" data-voucher="JN3SU-GF3C8">0</span> Cards
</div>
<div><b>This is your course </b></div>
</div>
</div>
</div>
<hr>
<div class="row" style="display: flex; justify-content: center;">
Submit
</div>
</div>
</div>
</div>
</div>
</div>
</body></html>
Related
So as said above, I have (for fun) recreated a website (hologram.io), because I'm new to CSS, and just wanted to see what I can do myself without help... But I can't figure out how I can position the whole first section which is absolute (-> On top of an Image) center, center. So vertical and horizontal, So that on bigger screens it always stays perfectly in the center of the menu... On the other sections which are not absolute, I used display: flex, justify-content: center and align-items center, which works perfectly... On the screenshots I have included, you can see the problem... Also, will include the code. It looks a bit messy, but should be fine haha...
Here you can see the noncentered Absolute item
Here you can see the flex items which are perfectly centered on every screensize and
And here for Refernce is the hologram website...
#font-face {
font-family: Robert Sans;
src: url(RobertSans-Regular.ttf);
}
#navtextonly li {
list-style-type: none;
display: inline;
padding: 15px;
text-align: center;
}
.listitem:hover {
cursor: pointer;
color: #4e6cff;
}
#hologramlogo {
margin-top: 20px;
margin-bottom: 20px;
margin-right: 0px;
padding-right: 0px;
}
nav {
background-color: rgb(255, 255, 255);
}
body {
margin: 0px;
font-family: Robert Sans;
}
#navbarouter {
display: flex;
align-items: center;
justify-content: center;
}
#navtextonly {
white-space: nowrap;
}
#mainmenuwobtnlogo {
margin-right: 100px;
}
ul {
font-size: 16px;
}
#buttonsmenu1 {
background-color: white;
border: 1px solid #4e6cffce;
padding: 12px 23px 12px 23px;
border-radius: 25px;
margin-right: 15px;
-webkit-box-shadow: 2px 2px 15px 1px #999999;
box-shadow: 2px 2px 15px 1px #999999;
}
#buttonsmenu1:hover {
border-color: #111;
cursor: pointer;
}
#buttonsmenu2 {
background-color: #4e6cff;
padding: 12px 23px 12px 23px;
color: white;
border-radius: 25px;
-webkit-box-shadow: 2px 2px 15px 1px #999999;
box-shadow: 2px 2px 15px 1px #999999;
}
#buttonsmenu2:hover {
background-color: #788fff;
color: white;
cursor: pointer;
}
.buttonsmenuouter {
margin-left: 25px;
}
#hamburgernav {
display: none;
}
#backgroundverlauf {
height: 800px;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.mainheading {
font-size: 64px;
white-space: nowrap;
font-weight: 400;
}
#h1top,
#h1bottom {
margin: 0px;
padding: 0px;
}
article {
color: rgb(255, 255, 255);
max-width: 550px;
}
#ellipse {
position: absolute;
top: 0px;
left: 630px;
}
#drohnepng {
position: absolute;
top: -50px;
left: 880px;
height: 80px;
}
#cartpng {
position: absolute;
top: 80px;
left: 585px;
height: 250px;
}
#rollerpng {
position: absolute;
top: 140px;
left: 825px;
height: 440px;
}
#content1 {
position: absolute;
top: 250px;
left: 12%;
}
#outerouter {
max-width: 1300px;
}
#glowh1 {
background: linear-gradient(
-60deg,
#904e95,
#904e95,
#e73c7e,
#ee7752,
#4e6cff,
white
);
background-size: 600%;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
animation: animate 10s linear infinite;
}
#keyframes animate {
0% {
background-position: 0%;
}
100% {
background-position: 600%;
}
}
#paragraph {
width: 390px;
color: rgb(199, 199, 199);
font-size: 20px;
margin-bottom: 30px;
}
#emailwithsubmit {
display: flex;
}
.emailfeld {
width: 100%;
padding: 18px 23px 18px 23px;
border-radius: 25px 26px 26px 25px;
border-width: 0px;
border: 1px red solid;
}
#submitbtn {
padding: 18px 35px 18px 35px;
border-radius: 25px 25px 25px 25px;
color: white;
font-weight: 600;
border-width: 0px;
background-image: linear-gradient(90deg, #00a6ff, #7831ca, #fe17c0);
position: relative;
left: -60px;
}
#mainpart2,
#mainpart3 {
display: flex;
align-items: center;
justify-content: center;
margin: 100px 60px 100px 60px;
}
#mainpart2-3outer {
}
#card {
margin-left: 60px;
margin-right: 100px;
height: 280px;
/* -webkit-animation: fadein 3.2s both;
-moz-animation: fadein 3.2s both;
-o-animation: fadein 3.2s both;
animation: fadein 3.2s both; */
animation: float2 6s ease-in-out infinite;
}
#keyframes float2 {
0% {
transform: translatey(0px);
}
50% {
transform: translateX(-10px);
}
100% {
transform: translatey(0px);
}
}
#-webkit-keyframes fadein {
0% {
opacity: 0;
-webkit-transform: translateX(-25px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
#-moz-keyframes fadein {
0% {
opacity: 0;
-moz-transform: translateX(-50px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
#-0-keyframes fadein {
0% {
opacity: 0;
-o-transform: translateX(-50px);
}
100% {
opacity: 1;
-o-transform: translateX(0);
}
}
#keyframes fadein {
0% {
opacity: 0;
transform: translateX(-50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
#ellipse {
-webkit-animation: fade 5s both;
-moz-animation: fade 5s both;
-o-animation: fade 5s both;
animation: fade 5s both;
}
#-webkit-keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-0-keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#cartpng,
#drohnepng,
#rollerpng {
/* -webkit-animation: fadein 3.2s both;
-moz-animation: fadein 3.2s both;
-o-animation: fadein 3.2s both;
animation: fadein 3.2s both;
transform: translatey(0px); */
animation: float 6s ease-in-out infinite;
}
#keyframes float {
0% {
transform: translatey(0px);
}
50% {
transform: translatey(-50px);
}
100% {
transform: translatey(0px);
}
}
#mainh-1,
#mainp-1 {
max-width: 280px;
}
#mainh-2,
#mainp-2 {
max-width: 280px;
}
.main1h,
.main1p,
.main2h,
.main2p {
display: flex;
flex-direction: row;
justify-content: space-between;
}
#mainh-3,
#mainp-3 {
max-width: 280px;
}
#mainh-4,
#mainp-4 {
max-width: 280px;
}
#mainh-1,
#mainh-2,
#mainh-3,
#mainh-4 {
margin: 0px;
padding: 0px;
}
#textmainpart2 {
margin-right: 60px;
}
.main2h1 {
margin-bottom: 40px;
}
.contentmainpart3-1 {
max-width: 475px;
margin-left: 60px;
}
.contentmainpart3-2 {
margin-right: 60px;
}
#beforefootercentered {
text-align: center;
margin-bottom: 75px;
}
.beforefootercolumncontent {
display: flex;
flex-direction: row;
justify-content: center;
gap: 100px;
margin-left: 100px;
margin-right: 100px;
margin-bottom: 50px;
}
.beforefootericons {
height: 66px;
width: 66px;
}
#beforefootercolumncontent1,
#beforefootercolumncontent2,
#beforefootercolumncontent3 {
max-width: 280px;
text-align: center;
}
#list2banner {
display: flex;
flex-direction: row;
margin-top: 20px;
}
#list1bannerouter {
max-width: 725px;
}
.footerbanner {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background-image: linear-gradient(90deg, #7831ca, #00a5ff);
margin: 0px 190px 0px 190px;
border-radius: 10px;
padding-left: 30px;
padding-top: 25px;
padding-right: 30px;
padding-bottom: 50px;
color: white;
position: relative;
top: 100px;
}
.footerbanner h2 {
font-size: 40px;
font-weight: 400;
margin-bottom: 10px;
}
#list1banner {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
#list1banner li:before {
content: "✓";
padding-right: 5px;
}
#btn1,
#btn2 {
border-radius: 25px;
padding: 10px 20px 10px 20px;
}
#btn1 {
margin-right: 20px;
background-color: #111;
border-width: 0px;
}
#btn2 {
background-image: transparent;
border: 1px solid white;
}
#pfeil {
margin-left: 5px;
}
#mainfooter {
height: 600px;
background-color: #0a1435;
}
#mainfooterupper {
height: 100px;
background-color: #0a1435;
display: none;
}
.item1 {
margin-right: 20px;
}
#placehold {
position: absolute;
top: 3100px;
left: 50%;
transform: translate(-50%, -50%);
color: rgb(255, 255, 255);
font-size: 70px;
}
#media only screen and (max-width: 1350px) {
html,
body {
overflow-x: hidden;
}
body {
position: relative;
}
#navtextonly {
font-size: 14px;
}
li {
padding-right: 20px;
}
#mainmenuwobtnlogo {
margin-left: 0px;
margin-right: 0px;
}
#navbarouter {
display: flex;
}
#hologramlogo {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 0px;
width: 120px;
}
.buttonsmenuouter {
margin-left: 25px;
font-size: 14px;
margin-right: 0px;
}
#buttonsmenu1,
#buttonsmenu2 {
padding: 9px 17px 9px 17px;
}
#backgroundverlauf {
height: 800px;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
}
#media only screen and (max-width: 990px) {
html,
body {
overflow-x: hidden;
}
body {
position: relative;
}
#navtextonly {
display: none;
}
#navbarouter {
margin-left: 20px;
margin-right: 20px;
display: flex;
justify-content: space-between;
}
#hologramlogo {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
}
.buttonsmenuouter {
margin-left: 0px;
}
#hamburgernav {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
display: inline;
}
#backgroundverlauf {
height: 800px;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.mainheading {
font-size: 50px;
}
#paragraph {
font-size: 19px;
}
}
#media only screen and (max-width: 570px) {
.mainheading {
font-size: 30px;
}
#paragraph {
font-size: 16px;
}
#content1 {
position: absolute;
top: 175px;
}
article {
color: rgb(255, 255, 255);
max-width: 500px;
display: flex;
flex-direction: column;
margin-right: 20px;
}
#floatingimages {
display: none;
}
#paragraph {
width: 300px;
color: rgb(199, 199, 199);
font-size: 16px;
margin-bottom: 30px;
}
#backgroundverlauf {
height: 500px;
}
.emailfeld {
width: 80%;
padding-bottom: 20px;
padding: 13px 20px 13px 20px;
border-radius: 25px 26px 26px 25px;
border-width: 0px;
border: 1px red solid;
}
#submitbtn {
width: 87%;
position: absolute;
left: 10px;
top: 280px;
padding-bottom: 20px;
padding: 13px 20px 13px 20px;
border-radius: 25px 26px 26px 25px;
border-width: 0px;
border: 1px red solid;
/*
padding: 13px 30px 13px 30px;
border-radius: 25px 25px 25px 25px;
color: white;
font-weight: 600;
margin-left: 0px;
border-width: 0px;
background-image: linear-gradient(90deg, #00a6ff, #7831ca, #fe17c0);*/
}
#emailwithsubmit {
display: flex;
gap: 13px;
flex-direction: column;
align-items: center;
}
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="styles2.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Index2</title>
</head>
<div>
<nav>
<div id="navbarouter">
<img
id="hologramlogo"
src="610f51dabc2bd752a968dfac_Hologram Logo Black Text.svg"
alt="Logo"
width="130px"
/>
<ul id="navtextonly">
<li class="listitem">Cellular IoT</li>
<li class="listitem">Why Hologram</li>
<li class="listitem">Resources</li>
<li class="listitem">Plans</li>
<li class="listitem">Jobs</li>
<li class="listitem">Store</li>
<span class="buttonsmenuouter">
<li id="buttonsmenu1">Contact Sales</li>
<li id="buttonsmenu2">Sign in</li>
</span>
</ul>
<div id="hamburgernavouter">
<img id="hamburgernav" src="hamburgernav.svg" alt="hamburgernav" />
</div>
</div>
</nav>
<div id="outerouterouter">
<img
src="background1.png"
id="backgroundverlauf"
alt="backgroundverlauf"
/>
<div id="outerouter">
<div id="content1">
<article>
<h1 class="mainheading" id="h1top">Internet everywhere.</h1>
<p class="mainheading" id="h1bottom">For every<span id="glowh1">thing</span>.</p>
<p id="paragraph">Spend less time monitoring your IoT deployments and more time innovating. Hologram's cellular platform enables you to connect and manage any device, anywhere in the world.</p>
<div id="emailwithsubmit">
<input type="email" class="emailfeld" autocomplete="email" maxlength="256" name="Email" data-name="Email" placeholder="E-Mail-Adresse" id="email" data-validation="email required email length" required="" data-validation-event="keyup change" data-validation-length="max256">
<input type="submit" value="Get started" data-wait="Please wait..." class="c-button is--gradient w-button disabled" disabled="disabled" id="submitbtn">
</div>
</article>
<div id="floatingimages">
<img class="sideimages" id="ellipse" src="backgroundellipse.png" alt="ellipse">
<img class="sideimages" id="drohnepng" src="drohne.png" alt="drohne">
<img class="sideimages" id="cartpng" src="cart.png" alt="cart">
<img class="sideimages" id="rollerpng" src="roller.png" alt="roller">
</div>
</div>
</div>
</div>
<div id="mainpart2-3outer">
<div id="mainpart2">
<div id="cardcontainer">
<img id ="card" src="card.png" alt="card">
</div>
<div id="textmainpart2">
<h1 class="main2h1"> Testüberschrift: global IoT connectivity platform</h1>
<div class="main1h">
<h2 id="mainh-1">One global SIM card</h2>
<h2 id="mainh-2">Automatic carrier switching</h2>
</div>
<div class="main1p">
<p id="mainp-1">Connect to 470+ networks in 200 countries using a single hardware-agnostic SIM card or eSIM eUICC chip. </p>
<p id="mainp-2">Hologram SIMs automatically switch between local carriers to ensure you have top performance and never lose service.</p>
</div>
<div class="main2h">
<h2 id="mainh-3">Flexible, scalable pricing</h2>
<h2 id="mainh-4">Connectivity tools for your team</h2>
</div>
<div class="main2p">
<p id="mainp-3">No contracts, quotas, or negotiations. Activate, change, or pause plans anytime via our Hologram Dashboard or APIs.</p>
<p id="mainp-4">Collaboratively manage your fleet with ease via our easy-to-use Dashboard or our modern REST API.</p>
</div>
</div>
</div>
<div id="mainpart3">
<div class="contentmainpart3-1">
<img src="hyper.svg" alt="hyper">
<h1>Testüberschrift2: flexibility and coverage with Hyper</h1>
<p>Future-proof your SIMs and scale faster globally with Hyper, Hologram’s eUICC SIMs and platform. Hyper provides over-the-air, updatable access to Hologram’s full portfolio of IoT connectivity partners and profiles.</p>
<p>What is Hyper? --></p>
</div>
<div class="contentmainpart3-2">
<img src="image maincontent3.png" alt="ballwiththingsmainpart3right" height= "570px">
</div>
</div>
</div>
<div id="beforefootercentered">
<h1>Scaling connectivity has never been so easy</h1>
<p>The simplest way to get your IoT deployment connected worldwide.</p>
</div>
<div class="beforefootercolumncontent">
<div id="beforefootercolumncontent1">
<img src="antenne.svg" loading="lazy" alt="cell tower icon" class="beforefootericons">
<h3 class="">No hassles or headaches</h3>
<p class="">Focus on your product and data — not connectivity infrastructure, negotiations, and pricing.</p>
</div>
<div id="beforefootercolumncontent2">
<img src="speedometer.svg" loading="lazy" alt="dashboard icon" class="beforefootericons">
<h3 class="">Ready to grow your business</h3>
<p class="">Manage global deployments from a single connectivity platform with pricing that scales as you do.</p>
</div>
<div id="beforefootercolumncontent3">
<img src="settings.svg" loading="lazy" alt="gear icon" class="beforefootericons">
<h3 class="">All the tools you need</h3>
<p class="">Our Hologram Dashboard, REST API, and supported hardware make integrating connectivity easy.</p>
</div>
</div>
<footer>
<div id="mainfooterupper"></div>
<div class="footerbanner">
<div id="list1bannerouter">
<h2>Try Hologram today.</h2>
<ul id="list1banner">
<li class="item1">Free Sim</li>
<li class="item1">1 MB/mo free</li>
<li>Connect and scale in days</li>
</ul>
</div>
<div id="list2banner">
<div id="btn1">Sign up free<img id="pfeil" src="pfeil.svg"></div>
<div id="btn2">Contact sales <img id="pfeil" src="pfeil.svg"></div>
</div>
</div>
<div id="mainfooter">
<h1 id="placehold">Footer Items Soon</h1>
</div>
</footer>
</main>
</body>
</html>
Use this to your container[absolute] element
.container{
position: absolute;
/* For Vertically center */
top: 50%;
transform: translateY(-50%);
/* For Horizontally center */
left: 50%;
transform: translateX(-50%);
}
If You're using height and width without positioning use this
.container{
--height: 100px;
height: var(--height);
/* Horizontally Center */
margin: auto;
/* Vertically Center */
margin-top: calc(50% - var(--height));
}
#-webkit-keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
#keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
html {
background-color: rgb(26, 30, 32);
}
* {
color: white;
}
body {
z-index: 1;
background-color: rgb(26, 30, 32);
}
.wrapper {
visibility: visible;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
padding: 20px 20px 20px 20px;
opacity: 1;
transition: 0.5s ease;
}
.page:target {
-webkit-animation: fadeIn 0.5s;
animation: fadeIn 0.5s;
}
.page:not(:target) {
display: none;
}
.page {
display: flex;
flex-direction: column;
justify-content: space-around;
transition: 0.5s ease;
margin-top: 20px;
}
.page .section {
padding-top: 25px;
padding-bottom: 25px;
border-bottom: 1px solid white;
}
h2 {
letter-spacing: 1px;
text-transform: capitalize ;
}
.button-fill {
width: fit-content;
height: 40px;
padding: 10px 20px 10px 20px;
border: 2px solid white;
border-radius: 5px;
background-color: transparent;
transition: 0.4s ease;
text-transform: uppercase;
font-size: small;
font-weight: bold;
}
.button-fill:hover {
background-color: white;
color: rgb(26, 30, 32);
cursor: pointer;
}
.button-unfill {
width: fit-content;
height: 40px;
padding: 10px 20px 10px 20px;
border: 2px solid rgb(175, 175, 175);
border-radius: 5px;
color: rgb(175, 175, 175);
background-color: transparent;
transition: 0.4s ease;
text-transform: uppercase;
font-size: small;
font-weight: bold;
}
.button-unfill:hover {
background-color: rgba(255, 255, 255, 0.1);
color: rgb(255, 255, 255);
border: 2px solid rgb(255, 255, 255);
cursor: pointer;
}
.popup {
background-color: rgb(42, 48, 51);
transition: 0.5s ease;
display: flex;
width: 75%;
height: max-content;
margin: 50px auto auto auto;
flex-direction: column;
overflow: hidden;
padding-top: 2.5px;
padding-bottom: 20px;
padding-right: 20px;
padding-left: 20px;
border: 1px solid transparent;
border-radius: 10px;
box-shadow: 0 0 20px 1px #00000070;
}
.popup .options {
display: flex;
flex-direction: row;
width: 50px;
justify-content: space-around;
}
.popup .close {
font-size: xx-large;
text-decoration: none;
height: 20px;
margin-bottom: 10px;
margin-left: -8px;
}
.popup .back {
font-size: xx-large;
text-decoration: none;
height: 20px;
margin-bottom: 10px;
margin-left: -8px;
}
.popup:not(:target) {
display: none;
}
.popup:target {
-webkit-animation: fadeIn 0.5s;
animation: fadeIn 0.5s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Royeghem</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="nav">
</div>
<div class="wrapper">
<a href="#home">
<button class="button-unfill">
Home
</button>
</a>
<a href="#elements">
<button class="button-unfill">
Elements
</button>
</a>
<div class="page" id="elements">
<div class="section" id="section-buttons">
<h2>Buttons</h2>
<button class="button-fill">
Button
</button>
<button class="button-unfill">
Button
</button>
</div>
<div class="section" id="section-popups">
<h2>Popups</h2>
<a href="#popup">
<button class="button-unfill">
Popup
</button>
</a>
</div>
</div>
<div class="page" id="home">
<div class="section" id="section-buttons">
<h2>Buttons</h2>
<button class="button-fill">
Button
</button>
<button class="button-unfill">
Button
</button>
</div>
<div class="section" id="section-popups">
<h2>Popups</h2>
<a href="#popup">
<button class="button-unfill">
Popup
</button>
</a>
</div>
</div>
<div id="popup" xml:id="popup2" class="popup">
<div class="options">
×
⇽
</div>
<h2>A Popup</h2>
<p>This is a random popup, but it can also be used as a seperate page.</p>
<p>A popup inside a popup is also possible!</p>
<a href="#popup2">
<button class="button-unfill">
Popup 2
</button>
</a>
</div>
<div id="popup2" class="popup">
<div class="options">
×
⇽
</div>
<h2>A Popup</h2>
<p>This is a second popup inside another one. Here the back arrow goes to the previous popup and the cross goes back to the elements page.</p>
</div>
</div>
</body>
</html>
This is my code. It works fine, but then if you try to navigate through the pages and popups, some stop fading in. I have been searching for a good reason, but couldn't think of anything, so I'm giving some experts the chance to explain this to me.
Any reason why it stops fading in and/or how I can fix it?
Thanks in advance for helping me.
i'm currently working on a webpage for my design class and i have a problem. This is the browser view:
I am kinda new with html and css but i have tried display in-line block, flex... Nothing worked, and i dont know what else i could do
So the problem is that the text "aaaaa" must be next to image. Here is my html code:
.caixa {
word-wrap: break-word;
width: 70%;
box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.2);
margin: 25px;
margin-left: 0px;
border-radius: 10px;
}
.caixa-img {
display: inline-block;
margin: 15px;
width: 15%;
position: relative;
}
.caixa-img img {
margin-right: 120px;
border-radius: 10px;
width: 100%;
height: 100%;
}
.info {
width: 100%;
padding: 10px 20px;
}
.tipo {}
.descripcio {
display: block;
background-color: chartreuse;
}
.tipo a {
color: #222222;
margin: 5px 0px;
font-weight: 700;
letter-spacing: 0.5px;
padding-right: 8px;
}
.tipo span {
color: rgba(26, 26, 26, 0.5);
}
.preu {
color: #333333;
font-weight: 600;
font-size: 1.1rem;
font-family: poppins;
letter-spacing: 0.5px;
}
.overlay {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background-color: rgba(226, 197, 88, 0.6);
display: flex;
justify-content: center;
align-items: center;
}
.comprar {
width: 160px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: #FFFFFF;
color: #252525;
font-weight: 700;
letter-spacing: 1px;
font-family: calibri;
border-radius: 20px;
box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.2);
}
.comprar:hover {
color: #FFFFFF;
background-color: rgb(248, 171, 55);
transition: all ease 0.3s;
}
.overlay {
visibility: hidden;
}
.caixa-img:hover .overlay {
visibility: visible;
animation: fade 0.5s;
}
#keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="col-12 productes">
<div class="producte1">
<div class="caixa">
<div class="caixa-img">
<img alt="" src="imgExplora/imgCarrousel/herbicida.jpg">
<div class="overlay">
Comprar
</div>
<div class="tipo">
<a href="#">
<h3>HERBICIDA</h3>
</a>
<!--
<div class="rating">
<span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
</div>-->
</div>
55€
</div>
<div class="info">
<span class="descripcio">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
</div>
</div>
Below an example using flexbox (see .caixa).
.caixa {
width: 70%;
box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.2);
margin: 25px 25px 25px 0;
/* margin-left: 0px; */
border-radius: 10px;
display: flex; /* Added */
}
.caixa-img {
margin: 15px;
width: 30%;
}
.caixa-img img {
border-radius: 10px;
width: 125px; /* For demo */
height: 125px; /* For demo */
}
.info {
width: 100%;
padding: 10px 20px;
}
.tipo {}
.descripcio {
display: block;
background-color: chartreuse;
word-break: break-all; /* Essential to break large words */
}
.tipo a {
color: #222222;
margin: 5px 0px;
font-weight: 700;
letter-spacing: 0.5px;
padding-right: 8px;
}
.tipo span {
color: rgba(26, 26, 26, 0.5);
}
.preu {
color: #333333;
font-weight: 600;
font-size: 1.1rem;
font-family: poppins;
letter-spacing: 0.5px;
}
.overlay {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background-color: rgba(226, 197, 88, 0.6);
display: flex;
justify-content: center;
align-items: center;
}
.comprar {
width: 160px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: #FFFFFF;
color: #252525;
font-weight: 700;
letter-spacing: 1px;
font-family: calibri;
border-radius: 20px;
box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.2);
}
.comprar:hover {
color: #FFFFFF;
background-color: rgb(248, 171, 55);
transition: all ease 0.3s;
}
.overlay {
visibility: hidden;
}
.caixa-img:hover .overlay {
visibility: visible;
animation: fade 0.5s;
}
#keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="col-12 productes">
<div class="producte1">
<div class="caixa">
<div class="caixa-img">
<img alt="" src="imgExplora/imgCarrousel/herbicida.jpg">
<div class="overlay">
Comprar
</div>
<div class="tipo">
<a href="#">
<h3>HERBICIDA</h3>
</a>
</div>
55€
</div>
<div class="info">
<span class="descripcio">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
</div>
</div>
if you use boostrap framework
you can use the bootstrap column and row.
<!-- language: lang-html -->
<div class="row">
<div class="col-6 productes">
<div class="producte1">
<div class="caixa">
<div class="caixa-img">
<img alt="" src="imgExplora/imgCarrousel/herbicida.jpg">
<div class="overlay">
Comprar
</div>
</div>
<div class="col-6">
<div class="tipo">
<a href="#">
<h3>HERBICIDA</h3>
</a>
<!--
<div class="rating">
<span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
</div>-->
</div>
55€
</div>
<div class="info">
<span class="descripcio">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
</div>
</div>
</div>
<!-- end snippet -->
You have too much nested divs that dont need to be there, just making it more complex.
Also, your text is going outside your div borders, this is not a good thing.
You can move your text next to the image by using flex.
You always apply flex on a parent of the element that you want to move around (in this case, div with a picture, and div with a text).
So you are going to apply flex to a div that holds both of those divs (div with image, and div with text).
Here is my solution to this problem on a simple example, it should help you :
https://codepen.io/Juka99/pen/YzGVQyv
I am trying to make some animated effect by adding a rectangle that expands over the button when the button (not the rectangle since it's set to width: 0px;) is hovered over by the user. Though, I don't really know how to do that, so I'm blocked.
So:
There's a button.
There's a rectangle somewhere.
The rectangle is 0px width.
I want the rectangle to grow from 0 to 200px width when the button is hovered. NOT the button.
I accept javascript solutions but only like real basic ones cause I'm a beginner, I won't understand javascript if it's not explained to me.
For the moment, here's my code:
HTML:
<div class="flex-container">
<div class="sidebar">
<button style="margin-top: 100px;" onclick="Accueil()"><div style="z-index: 2;">Accueil</div></button>
<div class="rectangle" name="acc" style="top: 100px;"></div>
<button onclick="Thés()"><div style="z-index: 2;">Thés</div></button>
<div class="rectangle" name="the" style="top: 100px;"></div>
<button onclick="Tisanes()"><div style="z-index: 2;">Tisanes</div></button>
<div class="rectangle" name="tis" style="top: 100px;"></div>
<button onclick="Théières()"><div style="z-index: 2;">Théières</div></button>
<div class="rectangle" name="thei" style="top: 100px;"></div>
</div>
CSS:
.sidebar > button {
margin: 20px; /* marge de 30px entre les boutons */
width: 200px;
height: 60px;
max-height: 60px !important;
max-width: 200px !important;
background-color: #F5FAD2;
text-align: center;
font-size: 24px;
border-radius: 7%;
border: none;
transition-duration: 0.4s;
cursor: pointer;
color: #404040;
position: relative;
}
.rectangle {
width: 0px;
height: 60px;
color: rgba(255, 255, 255, 0.144);
border-radius: 7%;
border: none;
transition: width 1.1s ease 0s;
transition-timing-function: ease;
transition-delay: 0s;
position: absolute;
z-index: 1;
}
.rectangle button:hover {
width: 200px;
}
Thanks.
<button> Button </button>
button{
transition:0.2s;
}
button:hover{
width:200px
}
You can add the transform property in the button CSS class. This will work to increase the size of the rectangle. You can adjust the value inside the scale to get the desired size when hovered. Copy the CSS & HTML codes below to have that working.
CSS:
.sidebar>button {
margin: 20px;
/* marge de 30px entre les boutons */
width: 200px;
height: 60px;
max-height: 60px !important;
max-width: 200px !important;
background-color: #F5FAD2;
text-align: center;
font-size: 24px;
border-radius: 7%;
border: none;
transition-duration: 0.4s;
cursor: pointer;
color: #404040;
position: relative;
}
.btn:hover {
width: 300px;
transform: scale(1.3) perspective(0.4px);
}
.rectangle {
color: rgba(255, 255, 255, 0.144);
border-radius: 7%;
border: none;
position: absolute;
z-index: 1;
}
HTML:
<div class="flex-container">
<div class="sidebar">
<button style="margin-top: 100px;" class="btn">
<div style="z-index: 2;">Accueil</div>
</button>
<div class="rectangle" name="acc" style="top: 100px;"></div>
<button class="btn">
<div style="z-index: 2;">Thés</div>
</button>
<div class="rectangle" name="the" style="top: 100px;"></div>
<button class="btn">
<div style="z-index: 2;">Tisanes</div>
</button>
<div class="rectangle" name="tis" style="top: 100px;"></div>
<button class="btn">
<div style="z-index: 2;">Théières</div>
</button>
<div class="rectangle" name="thei" style="top: 100px;"></div>
</div>
</div>
Hope this solution helps you!
Maybe it will be useful to you
.rectangle-out {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
background: #e1e1e1;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
padding:20px;
color:#000;
text-decoration: none;
}
.rectangle-out:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #2098D1;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.rectangle-out:hover, .rectangle-out:focus, .rectangle-out:active {
color: white;
}
.rectangle-out:hover:before, .rectangle-out:focus:before, .rectangle-out:active:before {
-webkit-transform: scale(1);
transform: scale(1);
}
<a class="rectangle-out" href="#">Rectangle Out</a>
Maybe it will be useful to you.
visit my GitHub page. my website total source code here. many Animation when hovering over a button
here.
https://github.com/jacksonkasi0/mhibuddy
(or) visit my website: https://mahibuddy.me
(or)
HTML:
<div class="lo">
<ul>
<li>
<a href="./love/love.html" target="_blank">
<i class="fa fa-heart"></i>
</a>
</li>
</ul>
</div>
CSS:
.lo ul {
margin: 0;
padding: 0;
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);}
.lo > ul > li {
list-style: none;
margin: 0 15px;}
.lo > ul > li > a {
position: relative;
display: block;
width: 60px;
height: 60px;
text-align: center;
line-height: 63px;
background: #333;
border-radius: 50%;
font-size: 30px;
color: #666;
transition: 0.5s;}
.lo>ul>li>a :hover{
position: relative;
display: block;
width: 60px;
height: 60px;
text-align: center;
line-height: 63px;
background: rgb(255, 255, 255);
border-radius: 50%;
font-size: 30px;
/* color: #666; */
transition: 0.3s;}
.lo > ul > li > a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: #ff05de;
transition: .5s;
transform: scale(.9);
z-index: -1;}
.lo > ul > li > a:hover::before {
transform: scale(1.1);
box-shadow: 0 0 15px #ff6e9e;}
.lo > ul > li > a:hover {
color: #ff1058;
box-shadow: 0 0 5px #ff1088;
text-shadow: 0 0 5px #ff1044;}
I think I have what you are looking for now
.flex-container {
display: flex;
flex-direction: row;
justify-content: center;
}
.rectangle {
display: none;
}
.button {
width: 200px;
height: 60px;
background-color: #F5FAD2;
text-align: center;
font-size: 24px;
border-radius: 7%;
border: none;
transition-duration: 0.4s;
cursor: pointer;
color: #404040;
position: relative;
margin-right: 20px;
}
.button:hover + .rectangle {
display: block;
width: 200px;
}
<div style="text-align:center" class="flex-container">
<div class = "button">Accueil</div>
<div class="rectangle">test</div>
<div class = "button">Thés</div>
<div class="rectangle">test</div>
<div class = "button">Tisanes</div>
<div class="rectangle">test</div>
<div class = "button">Théières</div>
<div class="rectangle">test</div>
</div>
You can checkout the fiddle I made with this info here: https://jsfiddle.net/mbmarketing4you/j92mgsy6/46/
You have to make the "rectangle" a child of the button in order for the hover effect to work.
I am just attempting a simple fix. For some reason my divider isn't showing up on hover? How can I get it to show up like the other text does? I have another example of how i got the divider to look on other pages...
http://runningfish.net/finestc/about/
Right underneath the header of the page that says "About"
Also, what I am currently working with is runningfish.net/finestc
You can see the live code there right underneath the section that says "Recent Sales".
I am still a fledgling coder so if I am doing something inefficiently or could be doing better that you notice, please point it out! I want to get better at coding. Critique welcome!
Thanks!
.grids {
width: 33.33%;
float: left;
display: inline-block;
position: relative;
}
.grids img {
display: block;
height: 33.33vh;
width: 100%;
}
.grid-image-description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
color: #fff;
visibility: hidden;
opacity: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity .5s, visibility .5s;
}
.grid-image-description h2 {
font-family: playfairdisplay;
font-size: 1.7em;
color: #fff;
}
.grid-image-description p {
font-family: playfairdisplay;
font-size: 1.0em;
color: #fff;
}
.grid-image-description hr {
border-top: 1px;
border-color: #001532;
border-style: solid;
box-shadow: 2px 1px 15px #fff;
margin: 0 0 0 10px;
max-width: 200px;
}
.grids:hover .grid-image-description {
visibility: visible;
opacity: 1;
}
.grids-description {
transition: .5s;
transform: translateY(1em);
}
.grids:hover .grid-image-description {
transform: translateY(0);
}
<a href="#nogo">
<div class="grids">
<img class="grid-image-cover" alt="" src="//runningfish.net/finestc/wp-content/uploads/2018/02/Depositphotos_11636543_original.jpg" />
<div class="grid-image-description">
<h2 class="grids-header">House For Sale</h2>
<hr>
<p class="grids-description">123 mulbury street</br>san diego, ca 92101
</p>
</div>
</div>
</a>
Add a width value to <hr>
.grids {
width: 33.33%;
float: left;
display: inline-block;
position: relative;
}
.grids img {
display: block;
height: 33.33vh;
width: 100%;
}
.grid-image-description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
color: #fff;
visibility: hidden;
opacity: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity .5s, visibility .5s;
}
.grid-image-description h2 {
font-family: playfairdisplay;
font-size: 1.7em;
color: #fff;
}
.grid-image-description p {
font-family: playfairdisplay;
font-size: 1.0em;
color: #fff;
}
.grid-image-description hr {
border-top: 1px;
border-color: #001532;
border-style: solid;
box-shadow: 2px 1px 15px #fff;
margin: 0 0 0 10px;
max-width: 200px;
/* added */
width: 200px;
}
.grids:hover .grid-image-description {
visibility: visible;
opacity: 1;
}
.grids-description {
transition: .5s;
transform: translateY(1em);
}
.grids:hover .grid-image-description {
transform: translateY(0);
}
<a href="#nogo">
<div class="grids">
<img class="grid-image-cover" alt="" src="//runningfish.net/finestc/wp-content/uploads/2018/02/Depositphotos_11636543_original.jpg" />
<div class="grid-image-description">
<h2 class="grids-header">House For Sale</h2>
<hr>
<p class="grids-description">123 mulbury street<br>san diego, ca 92101
</p>
</div>
</div>
</a>