how to place a div element in the same place as another? (one will be hidden and be toggled by action)

Question

I want to have an image that when clicked will fade out and display text "behind it". Right now all I can do is have my text appear above or below the image depending on where I move the element in the html file.

If I can figure this out the plan is to have the text display:none and image display:block then have them toggled by an action of clicking on the image / clicking on the text div.

If this doesn't make sense I can try to clarify.

I am working on my "tribute page" for free code camp. This is not a requirement but something extra I want to accomplish. The idea is to have my main image fade away and display the list items for "job history and Python timeline". Everything is commented in my code pen link below. In question are the final two div elements "main image" and "job History and Python timeline"

Here is a link to my code pen

<!-- job history and Python timeline -->
<div id="history-timeline" class="text-center" style="display:show; inline">

  <p>
    <ul>
      <li>
        <li>
          <li>
            <li>
</div>

Answer 1

Add position:absolute to your image, so it will be out of the page flow and img will stack over h2 . now you can hide the image on click. I used display:none on hover of div. make sure your parent div height match the height of image.

 .hide_on_hover{ width:200px; height:200px; } .hide_on_hover img{ position:absolute; } .hide_on_hover:hover img{ display:none; } 

 <div id="main-image-div" class="text-center hide_on_hover"> <img id="main-image" src="http://sdtimes.com/wp-content/uploads/2014/08/0815.sdt-python.jpg" class="rounded img-thumbnail " width="200" height="200"> <!-- job history and Python timeline --> <h2 id="history-timeline">does this work</h2> </div> 

Answer 2

This can easily be accomplished by adjusting the positioning and z-indexing.

Your parent div element will want to have a position: relative attribute. The text will want to then have a position: absolute attribute. This will allow the text to overlap your image. Position relative tells the child element to position themselves respective to the closes parent with a relative attribute.

The next step is to apply a few more attributes to control the layer. From my understanding, you'll want the image to be the top layer, and the text be the lower layer. Solution for this is to apply position: relative; z-index: 2 position: relative; z-index: 2 to your image and add z-index: 1 to your text. The z-index attribute gives a layer order to the overlapping elements. We need to give position: relative to the image because the default position of that element ignore z-index attributes. Things should start looking closer now.

Now, you mentioned using a display: block and display: none attribute to hide your image and show the text. This would work based on the functionality you described, but will create a jump effect since setting to display: none loses height settings so you'll get things collapsing on your page. If you dont want this, you'll want to use visibility: hidden and visibility: visible instead.

However, what I would probably do instead is add a new css class:

.hidden{ opacity: 0 }

This way you can have simpler javascript and also can go to the extent of animating the fade effect. Speaking of Javascript, this would use the following code:

$("#main-image").click(function(){ $(this).toggleClass('hidden') });

Here's what some your modified code looks like:

HTML:

<div id="main-image-div" class="text-center" style="position: relative">
<img id="main-image" src="http://sdtimes.com/wp-content/uploads/2014/08/0815.sdt-python.jpg" style="margin-top:2%; position: relative; z-index: 2;" class="rounded img-thumbnail">
<h2 id="history-timeline" style="position: absolute; z-index: 1; ">does this work</h2>        
</div>

CSS

.hidden{opacity: 0}

Outside the scope of this, you should avoid doing inline styling and have the html just use classes. Reference those classes in your css code and apply your styling there. This allows for cleaner, more manageable code as your site gets built up.

Answer 3

Try this code

   $(document).ready(function(){

      $("#main-image").click(function(){
         $(this).removeClass('show-block');
        $(this).addClass('hide-block');
        $('#history-timeline').removeClass("hide-block");
        $('#history-timeline').addClass("show-block");

      });
        $("#history-timeline").click(function(){
          $(this).removeClass('show-block');
        $(this).addClass('hide-block');
        $('#main-image').removeClass("hide-block");
          $('#main-image').addClass("show-block");

      });

    });

DEMO