Photos with dropdown

Question

I can't figure out how to separate the 2 photos in this. When you hover over one the other also fades in. The text box is overlapping on the first photo. I am trying to have 6 photos on the page. All with a dropdown list with different names and content. Can someone tell me how to fix this?

https://jsfiddle.net/southernsweets12/txkpngbt/

<html>
<head>  
<style>

.container {
  position: relative;
  width: 50%;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%)
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

.text {
  background-color: #000000;
  color: black;
  font-size: 16px;
  padding: 16px 32px;
}

.dropbtn {
  background-color: ##DCDCDC;
  color: black;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover,
.dropbtn:focus {
  background-color: ##DCDCDC;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: ##DCDCDC;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

 .dropdown-content a {
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
}

a:hover {
 text-decoration: underline;
}

.dropdown a:hover {
  background-color: ##DCDCDC
}

.show {
  display: block;
}

</style>
<body>

   <div class="container">
    <img alt="Avatar" class="image" src="https://farm5.staticflickr.com/4397/35532470254_614bf14a8b_b.jpg" style="width: 100%;" />
    <div class="middle">
      <div class="dropdown">
         <button class="dropbtn" onclick="myFunction()">Books</button>
      </div>
<div class="dropdown-content" id="myDropdown">
        <a href="http://www.mynerdydelights.com/search/label/books">All</a>
        <a href="http://www.mynerdydelights.com/search/label/five%20things%20about%20books">Five Things About</a>
        <a href="https://www.blogger.com/blogger.g?blogID=6842912760136368596#contact">Hauls</a>
      </div>
</div>
<br />
    <br />

    <body>

      <div class="container">
        <img alt="Avatar" class="image" src="https://farm5.staticflickr.com/4405/35532468424_c6ace22b6a_b.jpg" style="width: 100%;" />
        <div class="middle">
          <div class="dropdown">
            <button class="dropbtn" onclick="myFunction()">TV</button>
          </div>
<div class="dropdown-content" id="myDropdown">
            <a href="http://www.mynerdydelights.com/search/label/tv%20shows">All</a>
            <a href="http://www.mynerdydelights.com/search/label/five%20things%20about%20books">Five Things About</a>
            <a href="https://www.blogger.com/blogger.g?blogID=6842912760136368596#contact">Hauls</a>
          </div>
</div>
<html>
        <script>
          /* When the user clicks on the button, 
          toggle between hiding and showing the dropdown content */
          function myFunction() {
           document.getElementById("myDropdown").classList.toggle("show");
        }

          // Close the dropdown if the user clicks outside of it
          window.onclick = function(event) {
           if (!event.target.matches('.dropbtn')) {

              var dropdowns = document.getElementsByClassName("dropdown-
content");
              var i;
              for (i = 0; i < dropdowns.length; i++) {
               var openDropdown = dropdowns[i];
               if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
                }
              }
            }
          }

        </script>
        </html></div>
</body></div>
</body></head></html>

Before looking into your issue further, let's establish if the errors in your markup are typos or not _e.g._ ` — Fred Gandt, Aug 08 '17 at 03:34
Fix your markup and it will fix the problem! Aside from the incorrect and random tags through out the code, your container div isn't closed so the opacity change on the hover is being applied to the entire page. — FluffyKitten, Aug 08 '17 at 05:21
@FluffyKitten How do I close it? How do I fix the markup? I blended 4 different ones to make this so I'm not sure what shouldn't be there. — southernsweets12, Aug 08 '17 at 13:23
You just need to use standard html markup, nothing complicated at all. If you don't know how to write basic html then I suggest you google tutorials or something to learn. — FluffyKitten, Aug 08 '17 at 22:47
@FluffyKitten Thanks. I'll do that. Can you at least tell me where to close the container div because everything I've tried hasn't worked? — southernsweets12, Aug 09 '17 at 13:21
I'm afraid there are way too many issues with your code, simply closing the container div is nowhere near enough. You need to fix the entire structure of your code. I suggest do some tutorials about the basics and start again. — FluffyKitten, Aug 14 '17 at 09:48

Fred Gandt · Answer 1 · 2017-08-09T15:57:42.277

Many errors

In the code below, I have interpreted what I think was supposed to be happening, and applied appropriate fixes to the HTML, CSS and JavaScript.

In no significant order I:

Added a <!DOCTYPE ...> declaration.
Properly nested the HTML, whilst removing improper tags and adding those I found missing.
Corrected CSS hexadecimal color values like ##DCDCDC → #DCDCDC.
Added CSS to replace the use of less semantically suitable and/or elegant <br> tags.
Removed some unused CSS.
Removed the inline onclick JavaScript function calls, and replaced them with one event listener on the document.body.

By applying these changes, the result should be working as desired, and also be scaleable to allow addition of more .container elements.
Many other changes are possible, but (src: Goodreads)

"Remember that code is really the language in which we ultimately express the requirements. We may create languages that are closer to the requirements. We may create tools that help us parse and assemble those requirements into formal structures. But we will never eliminate necessary precision—so there will always be code." ― Robert C. Martin

and only you know "the requirements".

<!DOCTYPE html>
<html>
  <head>  
    <style>
      .container {
        width: 50%;
        position: relative;
      }
      .container:not(:first-child) {
        margin-top: 2em;
      }
      .image {
        opacity: 1;
        width: 100%;
        height: auto;
        display: block;
        backface-visibility: hidden;
        transition: opacity .5s ease;
      }
      .middle {
        top: 50%;
        left: 50%;
        opacity: 0;
        position: absolute;
        transition: opacity .5s ease;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
      }
      .container:hover .image {
        opacity: 0.3;
      }
      .container:hover .middle {
        opacity: 1;
      }
      .dropbtn {
        color: black;
        border: none;
        padding: 16px;
        font-size: 16px;
        cursor: pointer;
        background-color: #DCDCDC;
      }
      .dropdown {
        position: relative;
        display: inline-block;
      }
      .dropdown-content {
        z-index: 1;
        display: none;
        overflow: auto;
        min-width: 160px;
        position: absolute;
        background-color: #DCDCDC;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      }
      .dropdown-content a {
        color: black;
        display: block;
        padding: 12px 16px;
        text-decoration: none;
      }
      .dropdown-content a:hover {
        text-decoration: underline;
      }
      .dropdown-content.show {
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <img alt="Avatar" class="image" src="https://farm5.staticflickr.com/4397/35532470254_614bf14a8b_b.jpg" style="width: 100%;">
      <div class="middle">
        <div class="dropdown">
          <button class="dropbtn">Books</button>
          <div class="dropdown-content">
            <a href="http://www.mynerdydelights.com/search/label/books">All</a>
            <a href="http://www.mynerdydelights.com/search/label/five%20things%20about%20books">Five Things About</a>
            <a href="https://www.blogger.com/blogger.g?blogID=6842912760136368596#contact">Hauls</a>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <img alt="Avatar" class="image" src="https://farm5.staticflickr.com/4405/35532468424_c6ace22b6a_b.jpg" style="width: 100%;">
      <div class="middle">
        <div class="dropdown">
          <button class="dropbtn">TV</button>
          <div class="dropdown-content">
            <a href="http://www.mynerdydelights.com/search/label/tv%20shows">All</a>
            <a href="http://www.mynerdydelights.com/search/label/five%20things%20about%20books">Five Things About</a>
            <a href="https://www.blogger.com/blogger.g?blogID=6842912760136368596#contact">Hauls</a>
          </div>
        </div>
      </div>
    </div>
    <script>
      // When the user clicks on the button, toggle between hiding and showing the dropdown content
      // Close the dropdown if the user clicks outside of it
      document.body.addEventListener( "click", function( evt ) {
        let trg = evt.target;
        if ( trg.classList.contains( "dropbtn" ) ) {
          trg.nextElementSibling.classList.toggle( "show" );
        } else {
          while ( trg = document.querySelector( ".dropdown-content.show" ) ) {
            trg.classList.remove( "show" );
          }
        }
      }, false );
    </script>
  </body>
</html>

And here's the code above converted to an embedded snippet for demo:

document.body.addEventListener("click", function(evt) {
  let trg = evt.target;
  if (trg.classList.contains("dropbtn")) {
    trg.nextElementSibling.classList.toggle("show");
  } else {
    while (trg = document.querySelector(".dropdown-content.show")) {
      trg.classList.remove("show");
    }
  }
}, false);

.container {
  width: 50%;
  position: relative;
}

.container:not(:first-child) {
  margin-top: 2em;
}

.image {
  opacity: 1;
  width: 100%;
  height: auto;
  display: block;
  backface-visibility: hidden;
  transition: opacity .5s ease;
}

.middle {
  top: 50%;
  left: 50%;
  opacity: 0;
  position: absolute;
  transition: opacity .5s ease;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

.dropbtn {
  color: black;
  border: none;
  padding: 16px;
  font-size: 16px;
  cursor: pointer;
  background-color: #DCDCDC;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  z-index: 1;
  display: none;
  overflow: auto;
  min-width: 160px;
  position: absolute;
  background-color: #DCDCDC;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown-content a {
  color: black;
  display: block;
  padding: 12px 16px;
  text-decoration: none;
}

.dropdown-content a:hover {
  text-decoration: underline;
}

.dropdown-content.show {
  display: block;
}

<div class="container">
  <img alt="Avatar" class="image" src="https://farm5.staticflickr.com/4397/35532470254_614bf14a8b_b.jpg" style="width: 100%;">
  <div class="middle">
    <div class="dropdown">
      <button class="dropbtn">Books</button>
      <div class="dropdown-content">
        <a href="http://www.mynerdydelights.com/search/label/books">All</a>
        <a href="http://www.mynerdydelights.com/search/label/five%20things%20about%20books">Five Things About</a>
        <a href="https://www.blogger.com/blogger.g?blogID=6842912760136368596#contact">Hauls</a>
      </div>
    </div>
  </div>
</div>
<div class="container">
  <img alt="Avatar" class="image" src="https://farm5.staticflickr.com/4405/35532468424_c6ace22b6a_b.jpg" style="width: 100%;">
  <div class="middle">
    <div class="dropdown">
      <button class="dropbtn">TV</button>
      <div class="dropdown-content">
        <a href="http://www.mynerdydelights.com/search/label/tv%20shows">All</a>
        <a href="http://www.mynerdydelights.com/search/label/five%20things%20about%20books">Five Things About</a>
        <a href="https://www.blogger.com/blogger.g?blogID=6842912760136368596#contact">Hauls</a>
      </div>
    </div>
  </div>
</div>

Photos with dropdown

1 Answers1

Many errors