Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

HTML & CSS I can't see what I am doing wrong here

K

kindofnew

Coder
I have been following a tutorial I found on Youtube for building a website with bootstrap. It has been going good. Until now. I have spent 3 days trying to find what I did wrong in the code but I have been unable to see it myself.

I am trying to do is make some font awesome icons appear on a picture as you hover over the image. I have all the icons showing. These 2 icons (the eye and the shopping cart) stop showing after I move them with the CSS. I checked my code with the tutorial and it matches but his works but mine does not. I added the code for both the HTML and CSS. If you can see what I am doing wrong It could really help. I am trying to actually make this work. I really like this feature and would eventually like to use this on a website I will be using.

Thank you in advance.
HTML:
HTML: 
<section class="new-products">
  <div class="container">
    <div class="title-box">
      <h2>New Products</h2>
    </div>
    <div class="row">
      <div class="col-md-3">
        <div class="product-top">
          <img src="assets/image/soapboutique.jpg">
            <div class="overlay-right">
              <button type="button" class="btn btn-secondary" title="Quick Shop">
                <i class="fa-solid fa-eye"></i>
              </button>
              <button type="button" class="btn btn-secondary" title="Add to Cart">
                <i class="fa-solid fa-cart-plus"></i>
              </button>
            </div>
        </div>
        <div class="product-bottom text-center">
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star-half"></i>
            <h3>Soap</h3>
            <h5>$4.00</h5>
        </div>
      </div>
    </div>
  </div>
</section>

CSS:
CSS: 
.product-top img
{
  width: 100%;
}
.overlay-right
{
  display: block;
  opacity: 0;
  position: absolute;
  top: 10%;
  margin-left: 0;
  width: 70px;
}
.overlay-right .fa
{
  cursor: pointer;
  background-color: #fff;
  color: #000;
  height: 35px;
  width: 35px;
  font-size: 20px;
  padding: 7px;
  margin-top: 5%;
  margin-bottom: 5%;
}
.overlay-right .btn-secondary
{
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
.product-top:hover .overlay-right
{
  opacity: 1;
  margin-left: 5%;
  transition: 0.5s;
}
 
Solution
K
I figured out the problem. Another tutorial actually helped to figure it out. In the code I had not added any CSS for the class called "product-top". I also changed some class names and such. Here is the new code that actually works.
HTML
Code: 
<section class="new-products">
  <div class="container">
    <div class="title-box">
      <h2>New Products</h2>
    </div>
    <div class="row">
      <div class="col-md-3">
        <div class="product-top">
          <img src="assets/image/soapboutique.jpg" alt="Soap Boutique" class="image">
            <div class="overlay">
              <a href="#" class="icon" title="Quick View">
                <i class="fa-solid fa-eye"></i>
              </a>
              <a href="#" class="icon" title="Add...
Sort by date Sort by votes
Ok, I've found at least 2 errors in your code.

Firstly, you never closed your img element with the the closing tag </img>, I'm not sure you can put other elements in the img element.
Secondly, in your CSS, you're adding style to a non existent class name. .overlay-right .fa. The fa class doesn't exist anywhere in the overlay-right class.
 
Upvote 0 Downvote
Sorry for the very late reply. Kids and life put a lot of things on hold.

I did not realize I did not close the img tag. I will fix that first and see if I can find another way to fix the .fa as well. I followed that tutorial exactly and his worked. It did not make sense why my did not.

Thank you for helping. I will let you know exactly what works.
 
Upvote 0 Downvote
I tried closing the image tag and renaming the class for my icons nothing worked. I tried that together and separate. I looked up another tutorial for the same thing I am trying to do and it did not close the image tag either. The other tutorial was on W3 Schools how to list. I can't understand why these icons don't work. Every other icon works properly. I might have to do it a different way. I can't figure it out. I guess I can try to walk through the tutorial again step by step.

Any other advice? I am open to any suggestions.

Thank you again.
 
Upvote 0 Downvote
I am sorry. I tried to post a reply and I guess I did something wrong because it is not here.

I do not know exactly what part of the code moved them. I wrote the HTML code above on the file and tested the code. The buttons were underneath the image. Then I wrote the css above and the images were gone and did not show up on the image when hovering over the image.

I am trying to learn new code and bootstrap and adding font awesome and things are just going haywire. Sorry if I sound at all rude. That is not the intention. I am so very frustrated.
 
Upvote 0 Downvote
I figured out the problem. Another tutorial actually helped to figure it out. In the code I had not added any CSS for the class called "product-top". I also changed some class names and such. Here is the new code that actually works.
HTML
Code: 
<section class="new-products">
  <div class="container">
    <div class="title-box">
      <h2>New Products</h2>
    </div>
    <div class="row">
      <div class="col-md-3">
        <div class="product-top">
          <img src="assets/image/soapboutique.jpg" alt="Soap Boutique" class="image">
            <div class="overlay">
              <a href="#" class="icon" title="Quick View">
                <i class="fa-solid fa-eye"></i>
              </a>
              <a href="#" class="icon" title="Add to Cart">
                <i class="fa-solid fa-cart-plus"></i>
              </a>
            </div>
        </div>

CSS
Code: 
.product-top
{
  position: relative;
  width: 100%:
}
.image
{
  display: block;
  width: 100%;
}
.overlay
{
  display: block;
  opacity: 0;
  position: absolute;
  top: 10%;
  margin-left: 0;
  width: 70px;
}
.icon
{
  cursor: pointer;
  background-color: #ffff00;
  color: #000;
  height: 35px;
  width: 35px;
  font-size: 20px;
  padding: 10px;
  margin-top: 5%;
  margin-bottom: 5%;
}
.product-top:hover .overlay
{
  opacity: 1;
  margin-left: 5%;
  transition: 0.5s ease;
}
.fa-eye
{
  height: 15px;
  width: 15px;
}
.fa-cart-plus
{
  height: 25px;
  width: 25px;
  padding-top: 35px;
  margin-left: 10px;
}

All of this works.

I really very much appreciate all the help. Your help lead me to find the right code. I needed it alot.
 
Upvote 0 Downvote
Solution
Play Snayk 3+, higher dimensional snake game?

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom