I need little help, I'm new to JavaScript. I'm not sure how to fix the bug, currently, the code on hover is making the first box to display the title. But I want the title to be shown only on the chosen box. I thought in the for loop, the boxes[i] will make his first className[0] to display flex, but I guess it doesn't work that way. How can I fix this?
var boxes = document.getElementsByClassName("portfolio-content-box");
for(var i = 0; i < boxes.length; i ++){
boxes[i].addEventListener("mouseover", function(){
document.getElementsByClassName("portfolio-content-title-box")[0].style.display = "flex";
})
}
.portfolio-content {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-self: center;
margin-top: 100px;
padding: 2rem;
}
.portfolio-content-box {
position: relative;
width: 400px;
height: 350px;
margin: 1rem;
border-left:2px solid red;
cursor:pointer;
transition:0.3s;
}
.portfolio-content-box:hover {
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.portfolio-content-img {
width: 400px;
height: 350px;
object-fit: cover;
}
.portfolio-content-title-box {
position: absolute;
top:0;
left:0;
color: #FFF;
text-shadow: 0px 1px 1px RGBA(0,0,0,1);
background-color:rgba(0,0,0,0.8);
width:100%;
height:100%;
display:none;
}
.portfolio-content-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="portfolio-container">
<div class="portfolio-content-box">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyn7ssQEg-KFcYHmAelMv3ro3wGqsMdmE8lw&usqp=CAU" class="portfolio-content-img"/>
<span class="portfolio-content-title-box">
<span class="portfolio-content-title">Title</span>
</span>
</div>
<div class="portfolio-content-box">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqg54h1j3ljdf73LUi1rAobP0jxmrbEd9W1A&usqp=CAU" class="portfolio-content-img"/>
<span class="portfolio-content-title-box">
<span class="portfolio-content-title">Title</span>
</span>
</div>
</div>
Not sure why you want to use JS, but it can be done with pure CSS. You just need to target the title box when someone hovers the content box as below
.portfolio-content-box:hover>.portfolio-content-title-box {
display: flex;
}
Working Code
.portfolio-content {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-self: center;
margin-top: 100px;
padding: 2rem;
}
.portfolio-content-box {
position: relative;
width: 400px;
height: 350px;
margin: 1rem;
border-left: 2px solid red;
cursor: pointer;
transition: 0.3s;
}
.portfolio-content-box:hover {
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.portfolio-content-img {
width: 400px;
height: 350px;
object-fit: cover;
}
.portfolio-content-title-box {
position: absolute;
top: 0;
left: 0;
color: #FFF;
text-shadow: 0px 1px 1px RGBA(0, 0, 0, 1);
background-color: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
display: none;
}
.portfolio-content-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.portfolio-content-box:hover>.portfolio-content-title-box {
display: flex;
}
<div id="portfolio-container">
<div class="portfolio-content-box">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyn7ssQEg-KFcYHmAelMv3ro3wGqsMdmE8lw&usqp=CAU" class="portfolio-content-img" />
<span class="portfolio-content-title-box">
<span class="portfolio-content-title">Title</span>
</span>
</div>
<div class="portfolio-content-box">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqg54h1j3ljdf73LUi1rAobP0jxmrbEd9W1A&usqp=CAU" class="portfolio-content-img" />
<span class="portfolio-content-title-box">
<span class="portfolio-content-title">Title</span>
</span>
</div>
</div>
Related
What is the best way to create a diagonal line between the space of two concentric circles that will adjust in length depending on the space between the outer and inner circle as I want to be able to change the diameter of the outer and inner circle and have the line adjust dynamically.
This is a simple static version of my code: jsFiddle: https://jsfiddle.net/Kaevonz/mowahL2v/204/
This is the full dynamic version of my code with jQuery: https://jsfiddle.net/Kaevonz/fkbrpL54/46/
This is essentially what I am trying to recreate: I want the wall thickness label to adjust dynamically.
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
height: 500px;
border: 1px solid gray;
}
.elem {
box-sizing: border-box;
}
.div1 {
border-top: 3px solid #0DA8AA;
border-left: 1px solid #0DA8AA;
border-right: 1px solid #0DA8AA;
height: 60px;
width: 150px;
background: white;
}
.div2 {
border: 1px solid #0DA8AA;
border-radius: 50%;
width: 290px;
height: 290px;
background: white;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.div3 {
border: 1px solid #0DA8AA;
border-radius: 50%;
width: 240px;
height: 240px;
background: white;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.div4 {
border-top: 0.5px dashed black;
width: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
.div5 {
border: 0.5px dashed black;
width: 150px;
height: 50px;
position: absolute;
top: 0;
transform: translateX(-50%);
left: 50%;
float: left;
}
<div class="container">
<div class="elem div1"></div>
<div class="elem div2">
<div class="elem div3">
<div class="elem div5">
</div>
<div class="elem div4">
</div>
</div>
</div>
</div>
You could add that line by drawing a radius on the larger circle using a pseudo element and covering up the part that is within the smaller circle by giving the smaller circle a higher z index (as it already has a background color set).
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
height: 500px;
border: 1px solid gray;
}
.elem {
box-sizing: border-box;
}
.div1 {
border-top: 3px solid #0DA8AA;
border-left: 1px solid #0DA8AA;
border-right: 1px solid #0DA8AA;
height: 60px;
width: 150px;
background: white;
}
.div2 {
border: 1px solid #0DA8AA;
border-radius: 50%;
width: 290px;
height: 290px;
background: white;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.div2::before {
content: '';
position: absolute;
left: 0;
top: 50% - 0.5px;
width: 50%;
height: 1px;
background: gray;
transform: translateY(-50%) rotate(45deg);
transform-origin: right center;
}
.div3 {
border: 1px solid #0DA8AA;
border-radius: 50%;
width: 240px;
height: 240px;
background: white;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 1;
}
.div4 {
border-top: 0.5px dashed black;
width: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
.div5 {
border: 0.5px dashed black;
width: 150px;
height: 50px;
position: absolute;
top: 0;
transform: translateX(-50%);
left: 50%;
float: left;
}
<div class="container">
<div class="elem div1"></div>
<div class="elem div2">
<div class="elem div3">
<div class="elem div5">
</div>
<div class="elem div4">
</div>
</div>
</div>
</div>
I am trying to add text that is aligned with a pseudo-element on a div. For reference, I am talking about the .div2::before in my code as that is the dashed line between the inner and outer circle. I want to add a label that says "Wall Thickness" as shown below. The text should adjust with the circle size as the inner/outer circle size will be increasing/decreasing but the text position should adapt. What is the best way to accomplish this?
jsFiddle: https://jsfiddle.net/Kaevonz/cjpkxg6L/6/
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
height: 500px;
border: 1px solid gray;
}
.elem {
box-sizing: border-box;
}
.div1 {
border-top: 3px solid #0DA8AA;
border-left: 1px solid #0DA8AA;
border-right: 1px solid #0DA8AA;
height: 60px;
width: 150px;
background: white;
}
.div2 {
border: 1px solid #0DA8AA;
border-radius: 50%;
width: 340px;
height: 340px;
background: white;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.div2::before {
content: '';
position: absolute;
left: 0;
top: 50% - 0.5px;
width: 50%;
height: 1px;
border-top: 0.5px dashed black;
transform: translateY(-50%) rotate(45deg);
transform-origin: right center;
}
.div3 {
border: 1px solid #0DA8AA;
border-radius: 50%;
width: 120px;
height: 120px;
background: white;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 1;
}
.div4 {
border-top: 0.5px dashed black;
width: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
.div5 {
border: 0.5px dashed black;
width: 150px;
height: 50px;
position: absolute;
top: 0;
transform: translateX(-50%);
left: 50%;
float: left;
}
<div class="container">
<div class="elem div1"></div>
<div class="elem div2">
<div class="elem div3">
<div class="elem div5">
</div>
<div class="elem div4">
</div>
</div>
</div>
</div>
We need two elements within each other. Since we can't do that with pseudo elements, we need to add one element to the markup.
The newly added element will serve as a reference for where the text should be placed, so we align it exactly the same way as we would the first pseudo element.
And finally we use a child element or preferably a pseudo element for the text.
Note: for pseudo elements, text can be added via attributes.
DEMO
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
height: 500px;
border: 1px solid gray;
}
.elem {
box-sizing: border-box;
}
.div1 {
border-top: 3px solid #0DA8AA;
border-left: 1px solid #0DA8AA;
border-right: 1px solid #0DA8AA;
height: 60px;
width: 150px;
background: white;
}
.div2 {
border: 1px solid #0DA8AA;
border-radius: 50%;
width: 340px;
height: 340px;
background: white;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.div2::before {
content: '';
position: absolute;
left: 0;
top: 50% - 0.5px;
width: 50%;
height: 1px;
border-top: 0.5px dashed black;
transform: translateY(-50%) rotate(45deg);
transform-origin: right center;
}
.div3 {
border: 1px solid #0DA8AA;
border-radius: 50%;
width: 120px;
height: 120px;
background: white;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 1;
}
.div4 {
border-top: 0.5px dashed black;
width: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
.div5 {
border: 0.5px dashed black;
width: 150px;
height: 50px;
position: absolute;
top: 0;
transform: translateX(-50%);
left: 50%;
float: left;
}
/* NEW */
.text {
height: 1px;
position: absolute;
left: 0;
top: 50%;
width: 50%;
transform: translateY(-50%) rotate(45deg) translateX(-20%);
transform-origin: right center;
}
.text:before {
content: 'WE HAVE TEXT, lots of it';
transform: translateY(-50%) rotate(-135deg);
position: absolute;
right: 100%;
writing-mode: vertical-rl;
height: 100px;
/* height as width */
}
/* Preview */
.div2 {
animation: x 1s linear alternate infinite;
}
#keyframes x {
from {
height: 300px;
width: 300px;
}
to {
height: 450px;
width: 450px;
}
}
<div class="container">
<div class="elem div1"></div>
<div class="elem div2">
<div class="text"></div> <!-- NEW -->
<div class="elem div3">
<div class="elem div5">
</div>
<div class="elem div4">
</div>
</div>
</div>
</div>
I had to do some text alignment magic, which may or may not be optimal, but at this point I believe the idea is passed across.
I am creating some cards that are to display a kind of timeline, and I want to do that by having some card divs with content that are connected with a line and with a circle at each of the ends of the line to make it look good. Currently I just have the cards, and I cannot figure out how to make the connected lines. I currently have something like this:
HTML:
<div class="card-wrapper">
<div class="card">
</div>
<div class="card">
</div>
</div>
CSS:
.card-wrapper {
display: flex;
align-items: center;
align-content: center;
flex-direction: row;
}
.card {
width: 15rem;
height: 25rem;
background-color: #4090ff;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin: 2rem 4rem;
box-shadow: 0.5rem 0.5rem 3rem rgba(0, 0, 0, 0.3);
}
JSFiddle: https://jsfiddle.net/L3h9xe5d/10/
And I want something like this:
Please follow the above steps..
HTML
<div class="card-wrapper">
<div class="card">
<div class="card-inner"></div>
</div>
<div class="card">
<div class="card-inner"></div>
</div>
<div class="card">
<div class="card-inner"></div>
</div>
<div class="card">
<div class="card-inner"></div>
</div>
</div>
css
.card-wrapper {
display: flex;
align-items: center;
align-content: center;
flex-direction: row;
}
.card {
width: 15rem;
height: 25rem;
background-color: #4090ff;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin: 2rem 4rem;
box-shadow: 0.5rem 0.5rem 3rem rgba(0, 0, 0, 0.3);
position: relative;
}
.card::after {
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
width: 26px;
height: 26px;
background-color: #4090ff;
border-radius: 50%;
border: 6px solid #fff;
content: "";
}
.card::before {
position: absolute;
left: -20px;
top: 50%;
transform: translateY(-50%);
width: 26px;
height: 26px;
background-color: #4090ff;
border-radius: 50%;
border: 6px solid #fff;
content: "";
z-index: 9;
}
.card:first-child::before,
.card:last-child::after,
.card:first-child .card-inner::before,
.card:last-child .card-inner::after {
display: none;
}
.card-inner {
width: 100%;
height: 100%;
}
.card-inner::after {
position: absolute;
right: -65px;
top: 50%;
transform: translateY(-50%);
background-color: #000;
content: "";
width: 65px;
height: 4px;
}
.card-inner::before {
position: absolute;
left: -65px;
top: 50%;
transform: translateY(-50%);
background-color: #000;
content: "";
width: 65px;
height: 4px;
}
here is what im trying to do:
1-zoom in and rotate it in center(done)
2-open card(done)
3-View back of the card, and then go to the front of the opened card again.
Any tips on how to do it? im confused, ive tried with z-index and rotate transformations, but no luck at all.
Is it correct until now? what do you suggest and how can i achieve rotating to the back of the whole card, then to the front?
thank you in advance
function pers(){
document.getElementById("wrap").style.transform = "rotateX(0deg) rotate(0deg)";
document.getElementById("wrap").style.width = "250px";
document.getElementById("wrap").style.height = "500px";
}
function openCard() {
var button = document.getElementById('button');
if(button.innerHTML == 'Open Card') {
button.innerHTML = 'Close Card';
} else {
button.innerHTML = 'Open Card';
}
var cards = document.querySelectorAll('.card');
for(var i = 0; i < cards.length; i++) {
cards[i].classList.toggle('open');
}
}
body {
margin: 0;
background-color: grey;
/*background: radial-gradient(circle at center, rgba(50,50,50,1) 0%,rgba(14,14,14,1) 35%) */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
perspective: 1000px;
transform-style: preserve-3d;
}
img {
max-width: 100%;
}
*, *:after, *:before {
box-sizing: border-box;
}
h2 {
font-family: "Dancing Script", serif;
font-weight: normal;
font-size: 45px;
color: #009500;
text-align: center;
}
.wrap {
width: 125px;
height: 250px;
position: relative;
transform: rotateX(40deg) rotate(15deg);
transform-style: preserve-3d;
box-shadow: 15px 10px 5px rgba(0, 0, 0, 0.3);
transition: all 3s linear;
}
.card {
height: 100%;
width: 100%;
background-color: #fff;
border-radius: 2px;
position: relative;
border: 4px solid black;
text-align: center;
}
.card--front {
transform: rotateY(-20deg);
display: flex;
align-items: center;
justify-content: center;
transition: all 3.5s cubic-bezier(0.4, 0, 1, 1);
transform-origin: center left;
position: absolute;
top: 0;
left: 0;
z-index: 2;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.card--front.open {
transform: rotateY(-180deg);
box-shadow: 15px 10px 5px rgba(0, 0, 0, 0.3);
}
.card--front.back {
z-index: 0;
backface-visibility: visible;
-webkit-backface-visibility: visible;
}
.card--inner {
overflow: hidden;
padding: 15px;
}
.card--inner h2 {
font-size: 32px;
}
.card--inner img {
max-width: 60%;
margin-top: 1.5em;
}
.card--inner.open:before {
transform: translateX(-155%);
opacity: 0.1;
}
.card--inner:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
z-index: 1;
opacity: 1;
transition: all 1s ease-in-out;
}
button {
-webkit-appearance: none;
background: #E53935;
border: 5px solid #9f1815;
border-width: 0 0 5px;
padding: 10px 20px;
width: 150px;
text-align: center;
display: block;
transform: rotateX(30deg);
margin-top: 20px;
box-shadow: 0 4px 2px rgba(0, 0, 0, 0.3);
}
button:active {
border-bottom-width: 2px;
margin-top: 23px;
outline: none;
}
button:focus {
outline: none;
}
<div class="wrap" id="wrap">
<div class="card card--inner" style="background-color:white;">
<h2 style="display:inline;width:90%;height:20%;background-color:#8eb9ff;position:absolute;left:3%;top:4%;margin:0px 5px;"></h2>
<h2 style="display:inline;width:60%;height:10%;background-color:#8eb9ff;position:absolute;left:20%;top:28%;margin:0px 5px;"></h2>
<h2 style="display:inline;width:90%;height:37.5%;background-color:#8eb9ff;position:absolute;left:3%;top:41%;margin:0px 5px;"></h2>
<h2 style="display:inline;width:30%;height:10%;background-color:#8eb9ff;position:absolute;right:3%;top:84%;margin:0px 5px;"></h2>
</div>
<div id="cc" style="background-color:white;" class="card card--front back" onclick="openCard();">
<h2 style="display:inline;width:90%;height:46.5%;background-color:#8eb9ff;position:absolute;left:3%;top:51%;margin:0px 5px;z-index;1000;"></h2>
<h2 style="display:inline;width:90%;height:46.5%;background-color:#8eb9ff;position:absolute;left:3%;top:3%;margin:0px 5px;z-index;1000;"></h2>
</div>
<div class="card card--front" onclick="openCard();">
<h2 style="display:inline;width:90%;height:20%;background-color:#8eb9ff;position:absolute;left:3.5%;top:4%;margin:0px 5px;"></h2>
<h2 style="display:inline;width:60%;height:10%;background-color:#8eb9ff;position:absolute;left:20.5%;top:28%;margin:0px 5px;"></h2>
<h2 style="display:inline;width:80%;height:6%;background-color:#8eb9ff;position:absolute;left:9%;top:43%;margin:0px 5px;"></h2>
<h2 style="display:inline;width:90%;height:46.5%;background-color:#8eb9ff;position:absolute;left:4%;top:53%;margin:0px 5px;"></h2>
</div>
</div>
<button type="button" onclick="pers();setTimeout(openCard, 2000);" id="button">Open Card</button>
.q-items-container .q-item-info {
float: left;
position: relative;
width: 30.3rem;
height: 40rem;
margin: 2rem;
background: #ffffff;
cursor: pointer;
/* Add shadows to create the "card" effect */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
}
.q-items-container .q-item-info .q-food-img {
width: 100%;
height: 55%;
}
.q-items-container .q-item-info .q-food-info {
position: absolute;
top: 20px;
left: 20px;
z-index: 10000;
color: white;
}
.q-items-container .q-item-info .q-stars {
background-color: #2eb82e;
padding: 2px;
margin-top: 3px;
border-radius: 3px;
}
.q-items-container .q-item-info .q-separator {
width: 100%;
height: 7px;
background-color: #6c41a6;
}
.q-items-container .q-item-info .comp-container {
width: 100%;
height: 8rem;
position: absolute;
text-align: center;
top: 275px;
/* background-color:black; */
}
.q-items-container .q-item-info .comp-container .q-review {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
}
.q-items-container .q-item-info .comp-container .q-review .review {
width: 48%;
/* margin:auto; */
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.q-items-container .q-item-info .comp-container .q-review .sep {
width: 4%;
display: flex;
padding: 5px 0 5px 0;
justify-content: center;
align-items: center;
}
.q-items-container .q-item-info .comp-container .q-review .price {
width: 48%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.q-item-info .comp-container .q-company {
width: 8rem;
height: 8rem;
border: 0.8rem solid #6c41a6;
-webkit-border-radius: 2rem;
border-radius: 4rem;
margin: auto;
}
.q-items-container .q-item-info .q-order-now {
position: absolute;
bottom: 0;
width: 100%;
padding: 1rem;
margin-bottom: 0;
height: 4rem;
background: #6c41a6;
color: #fff;
font-size: 1.4rem;
text-align: center;
}
<div class="q-items-container">
<div class="q-item-info">
<div class="q-food-info">
<div>xyz</div>
<div>yzx</div>
</div>
<img style="background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
rgba(0,0,0,0.55);" class="q-food-img" src="https://static.pexels.com/photos/8313/food-eating-potatoes-beer-8313.jpg">
<div class="q-separator"></div>
<div class="comp-container">
<img class="q-company" src="https://n6-img-fp.akamaized.net/free-icon/telegram-logo_318-102687.jpg?size=338c&ext=jpg">
<div class="q-review">
<div class="review">
<span style="color:#4d4d49;">24</span>
<span style="color:#898989;">Reviews</span>
</div>
<div class="sep">
<div style="width:1px;height:100%;background-color:#d7d7d7;"></div>
</div>
<div class="price">
<span style="color:#4d4d49;">$4.99</span>
<span style="color:#898989;">Avg.Price</span>
</div>
<div>
</div>
</div>
</div>
<div class="q-order-now" ng-click="goToListingPage(cart)">
<div ng-show="cart.isOpen">Order Now <span>→</span></div>
<div ng-show="!cart.isOpen && !cart.isClosed">Opens at 8</div>
<div ng-show="cart.isClosed">Closed</div>
</div>
</div>
Now i want to achieve overlay effect like
I tried with linear background gradient , but it did not work out. One thing I want to mention here is, my image is dynamically set. How can I achieve that?
Try to apply the following css, then I believe you'll be able to apply it to the right element in code.
.q-items-container .q-item-info .q-food-info {
background-image: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,1));
width: 100%;
}