Hey there!
So here’s the problem I’m trying to solve:flex-direction: row, and when I click on one image, it shows the description of that image below the image. When I click on another image, the description changes.
Also, as I click on an image, a drop-shadow is created around the active image, and it can’t show on two images at once.
Please how do I go about this?
Thank you!
Can you show us what you have now? We’d probably need to see your current code in order to give you helpful advice.
1 Like
Thanks @bbsmooth
Here’s what I have currently - just the design [HTML & CSS]
If an image is clicked on, you have a drop shadow on the active image like this:
That Overview would only show when an image has been clicked on; so it’s hidden by default. When I click back on the active image, the dropdown closes, and if I click on another image, the contents in the Overview change.
I will quote myself:
“We’d probably need to see your current code in order to give you helpful advice.”
Pics are not code.
Also, I’m really not sure what you are asking for help with? Are you describing what you currently have? Or what you want to do?
Okay got it.
I was just describing what I currently have and what I want to do.
All the code I currently have is basically just HTML and CSS, so I didn’t think it was necessary at this point.
HTML
<main>
<!-- Featured Strains Images -->
<section class="featured-strains">
<div class="featured-strains__container">
<img src="../assets/images/dessert-0.png" alt="" />
<img
src="../assets/images/dessert-1.png"
alt=""
class="desert-img"
/>
</div>
<div class="featured-strains__container">
<img src="../assets/images/dough-lato-0.png" alt="" />
<img
src="../assets/images/dough-lato-1.png"
alt=""
class="dough-lato"
/>
</div>
<div class="featured-strains__container">
<img src="../assets/images/gelato-0.png" alt="" />
<img src="../assets/images/gelato-1.png" alt="" class="gelato" />
</div>
</section>
<!-- Dropdowns -->
<section class="strains-description">
<div class="strains-description__title">Overview</div>
<!-- Description -->
<div class="strains-description__text">
<p>
Dolato, also known as "Do-Si-Lato" and "Dosi-Lato," is an indica
marijuana strain made by crossing Do-Si-Dos with Gelato #41.
Dolato’s terpene profile features a fruity, earthy scent followed
by a sweet lavender taste.
</p>
<p class="mt-40">
<em>
Total THC: 20.8%, Total CBD: 1.1%, THCA: 18.1%, d-THC: 1.2%,
CBDA: 0.2%, CBGA: nd
</em>
</p>
<!-- Good For -->
<p class="strains-description__subtitle mt-40">
<span class="line"></span>
<span>Good For</span>
<span class="line"></span>
</p>
<div class="strains-description__flex mt-40">
<span> Sleeping </span>
<span> Zooming Out </span>
</div>
<!-- Packaging -->
<p class="strains-description__subtitle mt-40">
<span class="line"></span>
<span>Packaging</span>
<span class="line"></span>
</p>
<div class="strains-description__flex mt-40 packaging-items">
<span>
<img src="../assets/images/flower-jar.png" alt="flower jar" />
<p>Flower</p>
</span>
<span>
<img src="../assets/images/pre-rolls.png" alt="pre rolls" />
<p>Pre Rolls</p>
</span>
</div>
</div>
</section>
</main>
CSS
body {
font-family: "Poppins", sans-serif;
font-size: 16px;
line-height: 1.5;
color: #fff;
background: #212121;
}
.mt-24 {
margin-top: 24px;
}
.mt-32 {
margin-top: 32px;
}
.mt-40 {
margin-top: 40px;
}
.mt-48 {
margin-top: 48px;
}
.mt-56 {
margin-top: 56px;
}
.mt-64 {
margin-top: 64px;
}
.mt-72 {
margin-top: 72px;
}
.mt-80 {
margin-top: 80px;
}
.mt-88 {
margin-top: 88px;
}
.mt-96 {
margin-top: 96px;
}
.featured-strains {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 3rem;
margin-top: 3rem;
}
.featured-strains__container {
display: flex;
flex-direction: column;
}
.featured-strains__container img {
width: auto;
max-width: 350px;
height: auto;
object-fit: cover;
transition: all 0.2s ease-in-out;
}
/* .featured-strains__container:hover img:first-child {
filter: drop-shadow(0 0 50px #fff);
}
.featured-strains__container:hover img.desert-img {
filter: drop-shadow(0 0 10px #875ae2);
}
.featured-strains__container:hover img.dough-lato {
filter: drop-shadow(0 0 10px #f59077);
}
.featured-strains__container:hover img.gelato {
filter: drop-shadow(0 0 10px #f8d3b7);
} */
.featured-strains__container.active img:first-child {
filter: drop-shadow(0 0 50px #fff);
}
.featured-strains__container.active img:last-child {
filter: drop-shadow(0 0 10px #fff);
}
/* .active-img {
filter: drop-shadow(0 0 50px #fff);
}
.active-desert-img {
filter: drop-shadow(0 0 10px #875ae2);
}
.active-dough-lato {
filter: drop-shadow(0 0 10px #f59077);
}
.active-gelato {
filter: drop-shadow(0 0 10px #f8d3b7);
} */
.strains-description {
font-family: "Poppins", sans-serif;
text-align: center;
padding: 2rem;
margin: 3rem auto;
color: #e7e7e7;
background-color: #343434;
}
.strains-description__title {
font-size: 3.5rem;
font-weight: 400;
margin-bottom: 2rem;
}
.strains-description__text {
font-size: 2rem;
font-weight: 300;
max-width: 1200px;
margin: 0 auto;
}
@media (min-width: 1200px) {
.strains-description__text p:first-child {
padding-inline: 2rem;
}
}
.strains-description__subtitle {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 1rem;
font-size: 1.75rem;
font-weight: 200;
}
.line {
border-top: 1px solid #e7e7e7;
width: 25%;
margin: 2rem 0;
}
.strains-description__flex {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 5rem;
font-size: 2.25rem;
font-weight: 200;
}
.strains-description__flex.packaging-items img {
width: 300px;
max-width: 100%;
height: auto;
object-fit: cover;
}
.strains-description__flex.packaging-items span p {
margin-top: 2rem;
font-size: 1.75rem;
}
OK, so if I understand correctly, you want to be able to click on an image and have its overview content shown below. You will definitely need JS to do this correctly. One way to do this would be to wrap each of these images in a button and then have the click handler on the button control the display of the overview content.
yeah, that’s what I want to do, but I don’t know how do it.
I don’t know what your skill level is with JS so I don’t really know how to answer this. What is your skill level with JS? Do you have any idea how to add an event handler to a button with JS? Do you know how to manipulate the DOM with JS?
Yes, I do have an idea (example of an event is the onclick event, which I might be using here).
So if you do have a general idea of what to do then I would suggest you dive right in and try it. You can always google for things such as “javascript add event handler” and such to get examples. And then if you get stuck you can show us your code and we can help you from there.
I’ll give you one other suggestion. You can hide content using the CSS display: none property. So hiding/showing content really can be as simple as toggling that property on the content you want to show/hide.
1 Like
Yeah! Thanks @bbsmooth
I think I’ve done some of that before, when I once created a sidebar with a dropdown.
Thanks for your availabiliby to help!
system
April 19, 2023, 1:03pm
12
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
